有“盒子阴影颜色”属性吗？

我有以下CSS：

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

现在，我尝试提取该颜色以使页面颜色“可滑动”。有什么办法吗？只需删除颜色，然后再次使用相同的键，稍后将覆盖原始规则。

似乎没有一个box-shadow-color，至少Google 并未提出任何建议。

没有：

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

您可以通过检查计算样式列表在Chrome和Firefox中对此进行验证。具有简写方法的其他属性（如border-radius）在规范中定义了其变体。

与大多数缺少的“长期” CSS属性一样，CSS变量可以解决此问题：

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

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

其实……有！有点。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>

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

您可以使用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/jje​​nzz/pen/EaAzo

您可以使用CSS Variable

.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 */
}

可用于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等）是正确的，但我认为那里的某个人可能想要一个快速的答案，而不是被告知要学习编程以创建阴影。

是的，有办法

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset

也许这是新的（我对css3也很不满意），但是我有一个页面使用了您的建议：

-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}

..并且对我来说效果很好（至少在Chrome中）。