CSS3的box-shadow属性是否支持设置透明度？

Question

是否可以在盒子阴影上设置透明度？

这是我的代码：

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;

- Steven

Answer 1

我认为这里可以使用rgba()。毕竟，box-shadow和rgba()的浏览器支持程度大致相同。

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: red;
    margin: 10px;
}

div.a {
  box-shadow: 10px 10px 10px #000;
}

div.b {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>

- BoltClock

---

对我很有帮助，解决了基于颜色的阴影只适用于特定背景的巨大问题，因此您需要根据它们将覆盖在哪里来重新设计它们，这通常是不可能的（例如，一个覆盖照片和白色背景的div，这种情况下阴影看起来在照片上面会显得苍白无力）。 - jerclarke

@jeremyclarke 我也遇到了同样的问题，我需要一个按钮的阴影在多个背景颜色上起作用，而不必为每个背景定义一个唯一的阴影颜色。透明黑色就像真正的阴影一样。 - Clarus Dignus

如果我想要更改Chrome的input:-webkit-autofill，那么rgba()对我没有效果。 - Samuel

它总是Chrome，不是吗。 - BoltClock

但是如果有人只想设置阴影的透明度/不透明度（这是最初的问题），该怎么办？与颜色无关（例如，可以给定为命名颜色）。 - Chris K

@Chris K.：恐怕您无法单独更改原始的box-shadow声明。最接近的方法是使用rgba()和CSS变量，但这意味着不支持命名颜色，并且必须将变量应用于box-shadow声明本身。background-color也有类似的限制，详见此处。另请参见https://dev59.com/0FkS5IYBdhLWcg3wV1Vy#41265350。 - BoltClock