你可以用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 */
}

您可以使用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

事实上，有!排序的。盒影默认为颜色，就像边框一样。

根据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根本不支持盒影)

Demo

div { Box-shadow: 0 0 50px; 过渡:0.3s颜色; ｝ .green { 颜色:绿色; ｝ r { 颜色:红色; ｝ div:{徘徊 颜色:黄色; ｝ / * * /演示风格 身体{ text-align:中心; ｝ div { 显示:inline-block; 背景:白色; 身高:100 px; 宽度:100 px; 保证金:30 px; 这个特性:50%; ｝ < div class = "绿色" > < / div > < div class = "红色" > < / div >

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

你可以用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 */
}

你可以在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等)是正确的，但我认为有些人可能想要一个快速的答案，而不是被告知要学习编程来制作一些阴影。

No:

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