Как с помощью стилей задать цвет линии, созданной с помощью тега
Кроссбраузерно вывести горизонтальную одноцветную линию с помощью тега
.
Решение
Цвет линии, добавленной на веб-страницу через тег
, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color , а браузеры Firefox и Opera — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все параметры воедино для селектора HR , получим универсальное решение для популярных браузеров.
Пример 1. Цвет горизонтальной линии
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет горизонтальной линии
В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам (рис. 1).
Рис. 1. Цветная горизонтальная линия в браузере Safari
How to Change the Color of an
Element using CSS
You can simply use the CSS background-color property in combination with the height and border to the change the default color an
element.
In the following example we’ve changed the color of hr tag to light grey. You can also increase the thickness of the line by simply increasing the value of the height property.
Example
Change the Color of hr Tag using CSS hr This is a paragraph
This is another paragraph
Related FAQ
Here are some more FAQ related to this topic:
- How to create triangle or caret icons using CSS
- How to add border to an element on mouse hover without affecting the layout in CSS
- How to remove outline around text input boxes in chrome using CSS
Advertisements
Advertisements
Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.
Изменение цвета элемента hr в HTML через CSS: методы
Самый простой способ изменить цвет элемента
– это применить CSS со свойством border-color . Цвет можно задать hex-кодом ( #ff0000 ), RGB-значениями ( rgb(255,0,0) ) или названием цвета ( red ). Например:
Скопировать код
Этот код превратит обычный разделитель в красную линию шириной в 2 пикселя.
Одинаковый цвет в разных браузерах
Чтобы цвет элемента
одинаково отображался в различных браузерах, следует учесть их особенности.
Учет различий между браузерами
Браузеры по-разному интерпретируют стили элемента
. Чтобы добиться однообразия, можно применить следующий код:
How TO — Style HR (Horizontal Ruler/Line)
You can use the border property to style a hr element:
Example
/* Red border */
hr.new1 border-top: 1px solid red;
>
/* Dashed red border */
hr.new2 border-top: 1px dashed red;
>
/* Dotted red border */
hr.new3 border-top: 1px dotted red;
>
/* Thick red border */
hr.new4 border: 1px solid red;
>
/* Large rounded green border */
hr.new5 border: 10px solid green;
border-radius: 5px;
>
Related Pages
W3schools Pathfinder
Track your progress — it’s free!
COLOR PICKER
Contact Sales
If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com
Report Error
If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.