Подтвердить что ты не робот

Почему CSS-цвет CSS наследует свойство цвета?

Нормально ли, что цвет границы будет унаследован от свойства font color? Я с удивлением обнаружил, что:

div
{
 border: 4px solid;
 color: red;
 height: 100px;
 width: 100px;
}

<div></div>

Ответ 1

На основе раздел 4.1 соответствующего Фоны и границы Модуль spec, начальное значение border-color currentColor:

Цветовой модуль CSS - 4.4. currentColor цветное ключевое слово

CSS1 и CSS2 определяли начальное значение свойства border-color как значение свойства color, но не определяли соответствующее ключевое слово. Это упущение было признано SVG, поэтому SVG 1.0 ввел значение currentColor для свойств fill, stroke, stop-color, flood-color и lighting-color.

CSS3 расширяет значение цвета, чтобы включить ключевое слово currentColor, чтобы разрешить его использование со всеми свойствами, которые принимают значение <color> . Это упрощает определение этих свойств в CSS3.

Другими словами, в вашем случае значение рассматривается как следующее:

border: 4px solid currentColor;

Поэтому вы можете также использовать значение currentColor для чего-то вроде свойства background-color. Например:

div {
  color: red;
  width: 100px;
  height: 100px;
  border: 4px solid;
  background-color: currentColor;
}

<div></div>

Ответ 2

В CSS элемент может иметь один из двух "первичных" цветов: цвет переднего плана, указанный свойством color, и цвет фона, указанный свойством background-color. Многие другие свойства принимают цвет, но имеют черный цвет, поскольку начальное значение цвета было бы очень произвольным, поэтому вместо свойств, принимающих значение цвета, по умолчанию вычисляется цвет переднего плана.

Конечно, это может привести к черной границе, если цвет переднего плана черный, но только тогда. И цвет текста только черный, чтобы начать с, потому что таблицы стилей UA по умолчанию делают это так; CSS не указывает нигде, что начальное значение должно быть черным, но оно зависит от UA (CSS1, CSS2.1, CSS Color 3). Например, режим UA в режиме высококонтрастного режима или инвертированного цвета может указывать цветовую схему по умолчанию на белый или на черный цвет или на другую комбинацию цветов:

Такое поведение наблюдается со времен CSS1. Значение currentColor, введенное в CSS Color 3 на основе эквивалентного ключевого слова SVG, теперь отображается как начальное значение соответствующих свойств в соответствующие модули CSS3:

Использование attr() с значением цвета также возвращается к currentColor, когда значение не может быть найдено. См. Значения CSS 3.

До CSS3 не удалось восстановить цвет границы или контура для вычисленного цвета переднего плана после переопределения; см. мой ответ на этот связанный вопрос. Хотя этот вопрос использует слово "inherit", следует отметить, что указание border-color: inherit не наследуется от свойства color - как и все другие свойства CSS, оно наследует от border-color родительского элемента.

¹_{Значение по умолчанию - это инвертировать цвета пикселей под контуром, но поддержка invert не является обязательной, и если браузер не хочет этого делать, цвет переднего плана должен быть вместо этого используется.}