绘制网页魅影：解锁CSS drop-shadow 的惊艳效果

引言

在CSS的阴影世界中，用于设置阴影的属性有 3 个，分别为box-shadow、text-shadow以及接下来重点讲的filter:drop-shadow。
drop-shadow，习惯性地称它为“投影”，主要是处理一些不规则的DOM结构，但是在开发中我们很少见，是不是它兼容性不太好呢？以下是我截取Can I use网站的兼容表：

从上表我们可以看到绝大部分的浏览器已经支持，我们可以大胆去使用它啦，走起～

基本用法

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

box-shadow的局限

box-shadow顾名思义“盒子阴影”，只是盒子的阴影，如果这个盒子里面是空心透明的，要设置阴影的时候，光线是没办法穿透过去的。我这里列几个例子，给大家看看具体哪些业务场景会出现这情况。

1. 需求：让🍩带点阴影！
我二话不说直接拿出了 box-shadow 这个武器，一顿操作，使用了box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5)，结果变成这样了😭

2. 哈哈终于把功能开发完，提测去咯～设计师1：这个popover 的箭头怎么少了个阴影，你是不是想蒙混过关啊 🤨

于是我瞅了一眼我的 css

<div class="tooltip">
  tooltip triangle with box shadow
</div>

.tooltip {
  position: relative;
  box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.5);
  padding: 4px 6px;
  display: inline-block;
  margin: 4px;
  background: #fff;
}

.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: -3px;
  bottom: -12px;
  border: 6px solid black;
  border-color: #fff transparent transparent transparent;
}

嗯，确实没给这个箭头伪元素加阴影。于是，我又敲了几行 css 又反复调整 css，最终加了这几行实现了!

.tooltip::after {
  transform: rotate(-45deg);
  border-color: transparent transparent #fff #fff;
  transform-origin: 0 0;
  box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 0.5);
}

虽然是实现了，但是需要前端来来回回调整很多次，才能达到视觉效果的好看，真的没有更快捷更方便的方法了吗？

当然得有，这不就来了吗！ 🥰 🥰 🥰

用 drop-shadow解决上面的局限

1. 🍩里面空心部分带阴影：

filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));

2. popover加箭头阴影的：使用 drop-shadow 可以一行搞定🤝，只需要在原先的代码基础上把 box-shadow替换成 drop-shadow，其他啥啥啥都不用改（连里面的参数也是直接复制粘贴就行了喔～）

.tooltip {
	... // 保持不变
   box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.5); // 删掉
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));
}

结束语

本文介绍了CSS中的drop-shadow属性，它是一个强大而灵活的工具，可以为各种形状和透明元素创建自然的阴影效果。相比于传统的box-shadow，drop-shadow能够更好地处理不规则形状和透明区域，使得阴影效果更加真实和美观。通过几个实际的例子，我们看到了drop-shadow在处理甜甜圈图形和带箭头的提示框等场景中的优势。

所以大家以后如果在项目中看到不规则元素要加阴影，请记得我们这篇文章的主角drop-shadow啦！