Question

如何将已定义的属性值用作纯CSS 中的另一个属性，如下所示：

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

'color'可以随时更改。

Answer 1

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

您无法在所有情况下执行此操作，但对于此特定情况，您可以使用currentColor关键字。关键字始终指向应用于元素的当前颜色。这也是keyword has reasonably good browser support（来自IE9 +）。

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

使用currentColor关键字：

在下面的代码段中，您可以看到悬停时文字阴影的颜色如何自动更改。

＆＃13;

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

＆＃13;

<div>Some text</div>

＆＃13;

使用CSS变量：

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

CSS变量功能的浏览器支持详细信息可用@ Can I Use。

＆＃13;

: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;
}

＆＃13;

<div>Some text</div>

＆＃13;

Answer 2

您可以使用 php 声明变量并将其分配给 css 属性。对于Eg：

<?php $ThemeColor = "blue"; ?>

<style>
    body
    {
        background-color:<?php echo $ThemeColor; ?>
    }
</style>

或尝试我在MDN上找到的这个实验性功能：
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

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

2 个答案: