CSS 阴影与盒子阴影

前几天，Josh发了一条非常酷的推文，说阴影支持 PNG；我不知道它支持 PNG，所以我决定尝试一下。

🔥box-shadow无法很好地处理透明图像。filter: drop-shadow如您所愿，为图像内容添加阴影。

.my-img {
filter：drop-shadow（1px 2px 3px black）;
}

CSS 过滤器非常棒🥰

Pen：https://t.co/rVKgSlijt1 pic.twitter.com/6rwc7gG1Ro

— Josh ✨（@joshwcomeau）2020 年 7 月 30 日

HTML结构

举个例子，我们使用我最喜欢的神奇宝贝“Eevee”，并将三个 Eevee png 放在一个容器中。

<div class="container">
  <img src="https://i.imgur.com/q3SXJQf.png" />
  <img src="https://i.imgur.com/q3SXJQf.png" class="box-shadow" />
  <img src="https://i.imgur.com/q3SXJQf.png" class="drop-shadow" />
</div>

正如您所见，一个将是一个原始示例，一个将有一个 box-shadow，第三个将有一个 drop-shadow。

CSS 框阴影

您可能之前已经看到并使用过 box-shadow，这是一个很酷的功能，可以为我们的“盒子”添加阴影。

它的工作原理如下：

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

它在图像上放置了阴影，但在图像的框上。

CSS阴影

然后有一个CSS 过滤器，它在勾勒 PNG 轮廓时非常出色！

.drop-shadow {
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

这一切都将产生以下 Codepen。

浏览器支持

如前所述，CSS 过滤器很酷，但尚未得到广泛支持😩。

有一个polyfill，但也有限制。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。