参考
概念
CSS 中有多种阴影效果，其中常用的有 text-shadow(文字阴影)、box-shadow(盒子阴影)以及filter 的 drop-shadow() 不规则阴影。
这个函数有点类似于
box-shadow属性。box-shadow属性在元素的整个框后面创建一个矩形阴影，而drop-shadow()过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。可以给文本、盒子以及不规则形状添加阴影
filter: drop-shadow() 是 CSS 中的一个滤镜属性，用于向元素添加阴影效果。它可以在元素的背景和边框之外添加阴影，而不会影响元素本身的布局。
drop-shadow() 函数接受一组参数来定义阴影的样式，包括阴影的颜色、水平和垂直偏移量、模糊程度和阴影的扩展半径。
下面是 drop-shadow() 函数的语法，与 box-shadow语法类似：
filter: drop-shadow(h-shadow v-shadow blur spread color); 参数解释如下：
h-shadow: 设置阴影的水平偏移量，正值向右偏移，负值向左偏移。-
v-shadow: 设置阴影的垂直偏移量，正值向下偏移，负值向上偏移。
-
blur: 设置阴影的模糊程度，值越大越模糊。
-
spread: 设置阴影的扩展半径，值越大阴影范围越大。
-
color: 设置阴影的颜色，可以使用颜色名称、十六进制、RGB、RGBA 等方式来定义。
下面是一个例子，展示如何使用 drop-shadow() 属性添加阴影效果：
<!DOCTYPE html>
<html>
<head>
<title>Drop Shadow Example</title>
<style>
.shadow-element {
width: 200px;
height: 200px;
background-color: red;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<div class="shadow-element"></div>
</body>
</html> 在上述代码中，我们创建了一个名为 shadow-element 的 <div> 元素，并通过 filter: drop-shadow() 属性添加了一个 4px 水平偏移和 4px 垂直偏移的阴影，模糊程度为 6px，颜色为半透明的黑色（rgba(0, 0, 0, 0.5)）。这样就在元素周围添加了一个有阴影效果的边框。
效果对比
使用 box-shadow
使用 filter drop-shadow
