是否有"盒子阴影颜色"属性？

Question

我有以下CSS:

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

现在我正在尝试提取该颜色以使页面颜色"skinnable".有没有办法做到这一点？只需删除颜色,然后再次使用相同的密钥就会覆盖原始规则.

似乎没有box-shadow-color,至少谷歌没有任何改变.

Answer 1

其实......有!有点.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>

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

Answer 2

没有:

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

你可以在Firefox 31+中试试这个.不幸的是,在撰写本文时,没有其他浏览器具有可行的实现.

Answer 3

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

Answer 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.

样式.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