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

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

这是我的代码：

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

css

— 史蒂文
source

186

我想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
source

为我工作，解决了一个巨大的问题，即基于颜色的阴影仅适用于给定的背景，因此您需要根据可能无法使用的阴影来重新设置它们的样式（包括照片和白色的div bg，在这种情况下阴影在照片顶部看起来显得苍白）

— jerclarke

@jeremyclarke我遇到了同样的问题，我需要按钮的阴影来处理多种背景颜色，而不必为每个背景定义唯一的阴影颜色。透明的黑色就像真实的阴影一样。

— Clarus Dignus

如果我想更改Chrome浏览器，则rgba（）对我不起作用input:-webkit-autofill

— Samuel

一直都是Chrome，不是吗。

— BoltClock

@Chris K .：恐怕您将无法与原始的盒子阴影声明分开进行此操作。可以获取的最接近的是rgba（）和CSS变量，但这意味着不支持命名颜色，您必须将这些变量应用于box-shadow声明本身。background-color也有类似的限制，在此介绍。另请参阅stackoverflow.com/questions/40010597/...

— BoltClock