是否有“框阴影颜色”属性?

不:

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

你可以 try this out 在火狐31+中。不幸的是,在编写时,没有其他浏览器具有有效的实现。

事实上有!某种程度上。 box-shadow 默认为 color ,就像 border 做。

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

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

在实践中,你必须改变 颜色 财产和休假 箱形阴影 不带颜色:

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

支持

• 狩猎6号
• 铬20+(至少)
• 火狐13+(至少)
• IE9+(IE8不支持 箱形阴影 根本)

演示

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 您可以这样做:

1、SCS:

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

2个主题:

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

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

你可以用 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和火狐的方法是:(在之后改变颜色)

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

马特·罗伯茨的答案对于网络工具包浏览器(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;}

…它对我来说很好(至少在铬合金中)。