是否有一个 '的box-shadow-color' 属性？

Question

我有以下的CSS：

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

现在我想提取的颜色，使页面颜色“的换肤”。是否有这样做的方法吗？简单地删除的颜色，然后再使用相同的密钥后会覆盖原有的规则。

似乎没有成为一个box-shadow-color，至少谷歌变成什么了。

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

Answer 2

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

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

颜色是阴影的颜色。如果颜色是不存在的，所用的颜色从“色”属性中获取。

在实践中，你必须改变color财产，并留下box-shadow无颜色：

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

支持

• Safari浏览器6+
• 铬20+（至少）
• 火狐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 3

你可以使用一个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

Answer 4

你可以用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 5

一个快速复制/粘贴您可以使用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;

马特·罗伯茨的回答是WebKit浏览器（Safari浏览器，铬等）是正确的，但我以为有人在那里可能需要一个快速的答案，而不是被告知学习计划，使一些阴影。

Answer 6

是的，有办法

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

Answer 7

也许这是新的（我也是CSS3漂亮废话），但我有一个使用完全相同你有什么建议的页面：

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

..它（至少在铬）对我来说工作正常。