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

бордюр

Граница на ваших HTML-страницах может помочь привлечь внимание к фрагменту текста или окружить любой другой элемент HTML.

Как видно ниже, вокруг вашего текста можно создать рамку с использованием HTML и CSS на вашей веб-странице. В приведенном ниже примере мы окружили абзац (

) с красной каймой.

Первый пример с текстом, обведенным красной рамкой.
Этот пример также имеет несколько строк.

Для создания приведенного выше примера использовался приведенный ниже код.

Первый пример с текстом, обведенным красной рамкой.
Этот пример также имеет несколько строк.

В приведенном выше коде стиль определяет размер границы (пиксель, кратный пикселю), тип стиля и цвет границы. Стиль границы — то, как граница появляется на экране. Другие типы стилей границ включают пунктирную, пунктирную, двойную, канавку, гребень, вставку и выход. Цвет границы определяет цвет, который вы хотите использовать для границы. В приведенном выше примере использовался код цвета # FF0000, который является кодом цвета для красного.

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

Внешний вид элементов на веб-странице также может быть определен с помощью встроенного CSS. Встроенный CSS определяется в вашем HTML-документе, в элементе. Или вы можете определить CSS во внешнем файле с расширением .css. Затем вы можете ссылаться на этот файл из любого HTML-документа, и элементы в этом документе имеют доступ к стилям CSS. Например, с помощью приведенного ниже кода CSS создается новый класс под названием «borderexample», который можно применять к любому другому тегу HTML.

.borderexample {
стиль границы: твердый;
границы цвета: # 287EC7;
}

Используя приведенный выше код, если вы хотите применить этот стиль рамки к абзацу HTML, вы можете напечатать нечто похожее на приведенный ниже пример.

Вот пример границы, созданной с помощью CSS

Ссылка на основную публикацию