Есть ли способ установить border-color в CSS так же, как цвет текста?
Например, имея класс, который добавляет нижнюю пунктирную границу, но оставляя цвет указанной границы соответствующим цвету текста во многом таким же, как цвет text-decoration:underline - это цвет текста (color свойство)?
Вы действительно получаете это поведение бесплатно; он упоминается в spec:
Если цвет границы элемента не задан с помощью свойства border, пользовательские агенты должны использовать значение свойства "цвет" элемента как вычисленное значение для цвета рамки.
Итак, все, что вам нужно сделать, это опустить цвет при использовании стенографического свойства border:
.dotted-underline {
border-bottom: dotted 1px;
}
Или используйте только свойства border-style и border-width, а не border-color:
.dotted-underline {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
Или, в браузерах, которые поддерживают новое ключевое слово CSS3 currentColor, укажите это как значение для border-color (полезно для переопределения существующих border-color):
.dotted-underline {
border-bottom-color: currentColor;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
Цвет, который занимает граница будет таким же, как цвет текста по умолчанию.
Это:
border-bottom: 1px dotted currentColor;
Из спецификации:
currentColor Значение свойства цвета. Вычисленное значение ключевого слова currentColor является вычисленным значением свойства color. Если ключевое слово currentColor задано в свойстве color, он рассматривается как "color: inherit.
Смотрите здесь: http://www.w3.org/TR/css3-color/#currentcolor
(не работает в IE8)
Обновление: Итак, кажется, что явное указание значения цвета не требуется, поскольку значение по умолчанию уже является значением свойства color.
Итак, это работает отлично:
border-bottom: 1px solid;
Вам придется установить их одинаковым цветом.
Если вы хотите, чтобы ваш CSS был более программным и сухим, вы должны использовать что-то вроде LESS. Это может сэкономить вам много работы, поэтому вам нужно только объявить этот цвет один раз.