09.04.2020 в 08:51
LegGnom
Как использовать значение currentColor в CSS
В CSS у нас есть специальное значение цвета currentColor, которое может быть неизвестно большинству людей.
Что значит взять currentColor значение для свойства color и использовать его для любого другого свойства, где есть параметр цвета.
Например, следующее:
.red-box {
color: red;
border: 2px solid red;
box-shadow: 5px 10px red;
}
Это то же самое, что иметь:
.red-box {
color: red;
border: 2px solid currentColor;
box-shadow: 5px 10px currentColor;
}
Это дает нам повышенную гибкость для нашего CSS. Нам просто нужно изменить цвет в одном месте. Думайте об этом как о CSS-переменной только для цветов.
И это работает даже с унаследованными значениями. Например:
body {
color: blue;
}
p {
border: 1px solid currentColor;
// will create paragraphs with a blue border
}
Однако помните, что правила каскадирования применяются и здесь. Если у нас есть унаследованное значение и мы установили новый цвет для дочернего элемента, это новое значение будет иметь приоритет.
И это работает даже с унаследованными значениями. Например:
body {
color: blue;
}
p {
border: 1px solid currentColor;
color: red;
// will create paragraphs with a RED border
}
