如何使用定义的属性值作为纯CSS中的另一个属性？

Question

如何使用定义的属性值作为纯CSS中的另一个属性,如下所示:

.test {
    color: #66ccff;
    text-shadow: 0 0 8px valueOf(color);
}

"颜色"可以随时更改.

Answer 1

如何将已定义的属性值用作纯CSS中的另一个属性

在所有情况下都不能这样做,但对于这种特殊情况,您可以使用currentColor关键字.关键字始终指向应用于元素的当前颜色.这个关键字也有相当不错的浏览器支持(来自IE9 +).

如果你需要使用为一个属性(颜色除外)定义的值作为另一个属性的值,那么你应该考虑使用CSS变量(浏览器支持目前相当低)或使用一些CSS预处理器,如Sass或更少.

使用currentColor关键字:

在下面的代码片段中,您可以看到悬停时文本阴影的颜色如何自动更改.

div {
  color: #66ccff;
  text-shadow: 0 0 8px currentColor;
  font-size: 40px;
}
div:hover {
  color: yellowgreen;
}

<div>Some text</div>

使用CSS变量:

如果您的目标浏览器只是那些支持CSS变量的浏览器,那么您可以使用下面代码段中的变量.在这里,您可以看到变量如何在文档根目录中具有默认值,然后在元素悬停时更改它们的值.

有关CSS变量功能的浏览器支持详细信息可以使用@ Can I Use.

:root{
  --color: #66ccff;
  --border-width: 2px;
}
div {
  color: var(--color);
  border: var(--border-width) solid var(--color);
  text-shadow: 0 0 8px var(--color);
  font-size: 40px;
}
div:hover {
  --border-width: 4px;
  --color: yellowgreen;
}

<div>Some text</div>