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

Posted 2023-02-21

【中文标题】是否可以在 CSS3 box-shadow 中设置透明度？

【英文标题】：Is it possible to set transparency in 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;

【参考方案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。另见***.com/questions/40010597/…