Цвета рамок

По сравнению с другими параметрами рамок, задавать цвета довольно просто. CSS использует единственное свойство border-color, которое может принимать до четырех цветов одновременно. Если задано меньше четырех значений, в силу вступает тиражирование. Итак, если требуется, чтобы элементы h1 имели тонкую черную рамку сверху и снизу и толстую серую рамку по бокам, а также серые рамки средней ширины вокруг элементов p, подойдет такая разметка:

h1 {border-style: solid; border-width: thin thick; border-color: black gray;}
p {border-style: solid; border-color: gray;}

Конечно, для всех четырех сторон будет применено одно значение цвета, как это было с абзацем в предыдущем примере. С другой стороны, если указать четыре цвета, то получится рамка, все стороны которой будут окрашены в разные цвета. Могут применяться любые типы значений цветов, от именованных до шестнадцатеричных и RGB-значений:

p {border-style: solid; border-width: thick;
border-color: black rgb(25%,25%,25%) #808080 silver;}

Как я упоминал ранее в этой главе, если цвет не объявлен, то по умолчанию применяется основной цвет элемента. Таким образом, следующее объявление будет представлено:

p.shade1 {border-style: solid; border-width: thick; color: gray;}
p.shade2 {border-style: solid; border-width: thick; color: gray;
border-color: black;}

В результате у первого абзаца будет серая рамка, получившая значение gray от основного цвета абзаца.


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

h1 {border-style: solid; border-color: black; border-right-color: gray;}

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные значения и поля
Задание рамки одним свойством
Несколько стилей
Основные блоки элементов
Отрицательные и свернутые поля

Вернуться в раздел: CSS / 8. Отступы, рамки и поля