是否有“box-shadow-color”属性？答案

【问题标题】：Is there a 'box-shadow-color' property?是否有“box-shadow-color”属性？
【发布时间】：2011-03-02 01:43:13
【问题描述】：

我有以下 CSS：

box-shadow: inset 0px 0px 2px #a00;

现在我正在尝试提取该颜色以使页面颜色“可换肤”。有没有办法做到这一点？简单地删除颜色，然后再次使用相同的键覆盖原来的规则。

似乎没有box-shadow-color，至少谷歌什么也没发现。

【问题讨论】：

标签： css box-shadow

【解决方案1】：

没有：

http://www.w3.org/TR/css3-background/#the-box-shadow

您可以在 Chrome 和 Firefox 中通过检查计算样式列表来验证这一点。其他具有速记方法的属性（如border-radius）在规范中定义了它们的变体。

与大多数缺少的“长手” CSS 属性一样，CSS variables 可以解决这个问题：

#el {
    --box-shadow-color: palegoldenrod;
    box-shadow: 1px 2px 3px var(--box-shadow-color);
}

#el:hover {
    --box-shadow-color: goldenrod;
}

【讨论】：

变量的使用非常棒！让我们希望它们在未来几年内在所有浏览器中都是supported：/
截至 2019 年，all major browsers support CSS variables。
...除非你还必须支持 IE ?
如果您不控制原始规则，将无法正常工作。我认为 CSS 规范中明显缺乏这种颜色不能单独设置。

【解决方案2】：

可用于 Chrome 和 Firefox 的快速复制/粘贴方法是：（更改 # 后的内容以更改颜色）

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;

Matt Roberts 的回答对于 webkit 浏览器（safari、chrome 等）来说是正确的，但我认为那里的人可能想要一个快速的答案，而不是被告知学习编程来制作一些阴影。

【讨论】：

【解决方案3】：

其实……有！有点。 box-shadow 默认为 color，就像 border 一样。

根据http://dev.w3.org/.../#the-box-shadow

颜色是阴影的颜色。如果没有颜色，则使用颜色取自“颜色”属性。

在实践中，您必须更改color 属性并让box-shadow 不带颜色：

box-shadow: 1px 2px 3px;
color: #a00;

支持

Safari 6+
Chrome 20+（至少）
Firefox 13+（至少）
IE9+（IE8根本不支持box-shadow）

演示

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}

<div class="green"></div>
<div class="red"></div>

下面评论中提到的错误已得到修复:)

【讨论】：

Chrome 22 (canary) 在 CSS 动画中存在一个错误，导致 box-shadow 不继承动画 color 属性。 code.google.com/p/chromium/issues/detail?id=133745
很好，如果元素中没有文本。
是的，否则您必须将其包装起来并将color 重新应用于子元素。
我可以确认 IE10 也一样。
感谢您提供明智且相关的答案。 +10 给你！

【解决方案4】：

您可以使用 CSS 预处理器来进行蒙皮。使用Sass，您可以执行类似的操作：

_theme1.scss：

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_theme2.scss：

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

styles.scss：

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

如果您需要的不是站点范围的主题，而是基于类的主题，那么您可以这样做：http://codepen.io/jjenzz/pen/EaAzo

【讨论】：

【解决方案5】：

您可以使用 CSS 变量

做到这一点

.box-shadow {
    --box-shadow-color: #000; /* Declaring the variable */
    width: 30px;                
    height: 30px;
    box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */

}

.box-shadow:hover  {
    --box-shadow-color: #ff0000; /* Changing the value of the variable */
}

【讨论】：