CSS 是否有“box-shadow-color”属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3012899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a 'box-shadow-color' property?
提问by Epaga
I have the following CSS:
我有以下 CSS：
box-shadow: inset 0px 0px 2px #a00;
Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.
现在我正在尝试提取该颜色以使页面颜色“可换肤”。有没有办法做到这一点？只需删除颜色，然后再次使用相同的键即可覆盖原始规则。
There doesn't seem to be a box-shadow-color, at least Google turns nothing up.
似乎没有box-shadow-color，至少谷歌没有发现任何东西。
采纳答案by Andy E
No:
不：
http://www.w3.org/TR/css3-background/#the-box-shadow
http://www.w3.org/TR/css3-background/#the-box-shadow
You can verify this in Chrome and Firefox by checking the list of computed styles. Other properties that have shorthand methods (like border-radius) have their variations defined in the spec.
您可以在 Chrome 和 Firefox 中通过检查计算样式列表来验证这一点。其他具有速记方法的属性（如border-radius）在规范中定义了它们的变体。
As with most missing "long-hand" CSS properties, CSS variablescan solve this problem:
与大多数缺失的“长手”CSS 属性一样，CSS 变量可以解决这个问题：
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
回答by fregante
Actually… there is! Sort of. box-shadowdefaults to color, just like borderdoes.
其实……有！有点。box-shadow默认为color，就像border做一样。
According to http://dev.w3.org/.../#the-box-shadow
根据http://dev.w3.org/.../#the-box-shadow
The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color' property.
颜色是阴影的颜色。如果颜色不存在，则使用的颜色取自 'color' 属性。
In practice, you have to change the colorproperty and leave box-shadowwithout a color:
在实践中，您必须更改color属性并离开box-shadow颜色：
box-shadow: 1px 2px 3px;
color: #a00;
Support
支持
- Safari 6+
- Chrome 20+ (at least)
- Firefox 13+ (at least)
- IE9+ (IE8 doesn't support
box-shadowat all)
- 野生动物园 6+
- Chrome 20+（至少）
- Firefox 13+（至少）
- IE9+（IE8 完全不支持
box-shadow）
Demo
演示
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>The bug mentioned in the comment below has since been fixed :)
下面评论中提到的错误已被修复:)
回答by jjenzz
You could use a CSS pre-processor to do your skinning. With Sassyou can do something similar to this:
你可以使用 CSS 预处理器来做你的皮肤。使用Sass你可以做类似的事情：
_theme1.scss:
_theme1.scss：
$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.
_theme2.scss:
_theme2.scss：
$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.
styles.scss:
样式.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;
If it's not site wide theming but class based theming you need, then you can do this: http://codepen.io/jjenzz/pen/EaAzo
如果它不是站点范围的主题，而是您需要的基于类的主题，那么您可以这样做：http: //codepen.io/jjenzz/pen/EaAzo
回答by sandeep kumar
You can do this with CSS Variable
你可以用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 */
}
回答by Dane Calderon
A quick and copy/paste you can use for Chrome and Firefox would be: (change the stuff after the # to change the color)
可用于 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' answer is correct for webkit browsers (safari, chrome, etc), but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows.
Matt Roberts 的回答对于 webkit 浏览器（safari、chrome 等）是正确的，但我认为那里的人可能想要一个快速的答案，而不是被告知学习编程来制作一些阴影。
回答by Ivan Jelev
Yes there is a way
是的，有办法
box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset
回答by Matt Roberts
Maybe this is new (I am also pretty crap at css3), but I have a page that uses exactly what you suggest:
也许这是新的（我在 css3 方面也很糟糕），但我有一个页面完全使用了你的建议：
-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}
.. and it works fine for me (in Chrome at least).
..它对我来说很好用（至少在 Chrome 中）。
