是否有'箱子阴影颜色'属性?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

我有以下的CSS:

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

现在我正在尝试提取该颜色以使页面颜色变得可换肤。有没有办法做到这一点?简单地删除颜色,然后再次使用相同的键将覆盖原始规则。

似乎没有box-shadow-color,至少百度什么也没有。

提问于
用户回答回答于

没有:

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;
}
用户回答回答于

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

扫码关注云+社区