Как изменить цвет hr

Как с помощью стилей задать цвет линии, созданной с помощью тега <hr>

Кроссбраузерно вывести горизонтальную одноцветную линию с помощью тега <hr> .

Решение

Цвет линии, добавленной на веб-страницу через тег <hr> , по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color , а браузеры Firefox и Opera — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все параметры воедино для селектора HR , получим универсальное решение для популярных браузеров.

Пример 1. Цвет горизонтальной линии

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам (рис. 1).

CSS стили для горизонтальных линий.
1. Тег <hr>

Цвет линии тега <hr> , по умолчанию отображается серого цвета и с эффектом объема.

Линия <hr> по умолчению увеличенная в 1000 раз:

линия HR

Чтобы линия выбранного цвета во всех браузерах отображалась одинаково, нужно задать 4 свойства:

Линия <hr> градиент:

2. Линейный градиент

Градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image . Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background.

Линейный градиент (Linear Gradient) — плавный переход от цвета к цвету по прямой линии.
Радиальный градиент (Radial Gradient) — плавный переход от цвета к цвету из одной точки во все направления.

Линейный градиент

Направление линии градиента может быть определено двумя способами:

Использование ключевых слов;
Использование градусов.

Табллца. Типы градиента

Ключевое слово	Угол	Направление	Результат
to top	0deg	Снизу вверх.
to left	270deg	Справа налево.
to bottom	180deg	Сверху вниз. Значение по умолчанию.
to right	90deg	Слева направо.
to top left	315deg	От правого нижнего угла к левому верхнему.
to top right	45deg	От левого нижнего угла к правому верхнему.
to bottom left	225deg	От правого верхнего угла к левому нижнему.
to bottom right	135deg	От левого верхнего угла к правому нижнему.

После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% — конечной.

HTML тег <hr>

HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.

Примечание: горизонтальная линия используется для визуального и логического разделения контента, но в ней отпадает необходимость, если сразу после нее идет заголовок или тег, начинающий новый раздел, или логический блок (<section>, <article>), так как эти элементы по умолчанию подразумевают тематические изменения.

По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров: