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

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

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

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

Этот пример также имеет несколько строк.

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

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

Этот пример также имеет несколько строк.

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

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

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

.borderexample {border-style: solid; границы цвета: # 287EC7; }

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

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