是否可以在 CSS3 box-shadow 中设置透明度？答案

【问题标题】：Is it possible to set transparency in CSS3 box-shadow?是否可以在 CSS3 box-shadow 中设置透明度？
【发布时间】：2011-07-24 10:37:39
【问题描述】：

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

这是我的代码：

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

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

为我工作并解决了基于颜色的阴影仅适用于给定背景的巨大问题，因此您需要根据它们将要处理的内容重新设置它们的样式，这通常是不可能的（a覆盖照片和白色背景的 div，在这种情况下，照片顶部的阴影看起来很苍白）
@jeremyclarke 我遇到了同样的问题，我需要一个按钮的阴影来处理多种背景颜色，而不必为每个背景定义唯一的阴影颜色。透明的黑色就像一个真正的阴影。
rgba() 对我不起作用，如果我想更改 chrome 的 input:-webkit-autofill
总是 Chrome，不是吗。
@Chris K.：恐怕您无法与原始 box-shadow 声明分开执行此操作。您可以获得的最接近的是 rgba() 和 CSS 变量，但这意味着不支持命名颜色，您必须将变量应用于 box-shadow 声明本身。 background-color 有类似的限制，覆盖here。另见stackoverflow.com/questions/40010597/…