Создание цветной рамки вокруг текста с помощью HTML и CSS

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить любой элемент HTML.

Рамку вокруг любого текста можно создать с помощью HTML и CSS. В приведенном ниже примере мы окружили абзац (<p> </ p>) красной рамкой.

Создание цветной рамки вокруг текста

Чтобы создать приведенный выше эффект, использовался следующий код:

<p style="border:3px; border-style:solid; border-color:#FF0000; padding: 1em;"> Первый пример с текстом, окруженным красной рамкой.<br> В этом примере использовано несколько строк.</p>

В данном коде стиль определяет размер границы (px - пиксели), тип стиля и цвет границы (border color CSS). Стиль границы - это то, как на экране отображается рамка. Другие типы стилей границ - dotted, dashed, double, groove, ridge, inset и outset. Окраску границы определяет цвет, который будет использован для нее. В приведенном выше примере использовался красный цвет (#FF0000).

Определение стиля с помощью CSS

Стиль того, как элемент отображается на веб-странице, также можно через CSS-код, помещенный в раздел <head> </ head> HTML-страницы или внешнего файла CSS. Например, в приведенном ниже примере создается новый класс «borderexample», который может быть применен к любому HTML- тегу:

<style>
.borderexample
{
border-style:solid;
border-color:#287EC7;
}
</style>

Используя приведенный выше код, можно создать для элемента рамку с помощью внешних стилей CSS, которая аналогична предыдущему примеру с использованием HTML border color:

<p class="borderexample">Here is an example of a border created using CSS</p>

Перевод статьи «Create a colored border around text with HTML and CSS» дружной командой проекта Сайтостроение от А до Я.

28 июля 2017 в 08:39
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок