有“box-shadow-color”属性吗？
有“box-shadow-color”属性吗？
提问于 2010-06-10 16:47:56
我有以下CSS：
box-shadow: inset 0px 0px 2px #a00;现在，我正在尝试提取该颜色以使页面颜色“可换皮”。有什么方法可以做到这一点吗？只需删除颜色，然后稍后再次使用相同的键就会覆盖原始规则。
似乎没有box-shadow-color，至少谷歌什么也没找到。
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-06-10 17:01:10
否：
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;
}Stack Overflow用户
发布于 2013-09-03 21:38:01
您可以使用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
Stack Overflow用户
发布于 2012-04-24 19:54:03
你可以在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等)来说是正确的，但我想有人可能想要一个快速的答案，而不是被告知要学习编程来制作一些阴影。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3012899
复制相关文章
相似问题