CSS drop-shadow() 函数

CSS drop-shadow() 语法

在 CSS 中，drop-shadow() 函数一般作为 filter 属性的值，来为元素添加阴影效果。

语法：

filter: drop-shadow(offset-x offset-y blur-radius color);

说明：

drop-shadow() 函数接收以下参数。

offset-x（必选）：阴影的水平偏移，正值向右，负值向左。
offset-y（必选）：阴影的垂直偏移，正值向下，负值向上。
blur-radius（必选）：阴影的模糊半径，值越大阴影越模糊，默认为 0（无模糊）。
color（必选）：阴影的颜色，支持任何有效的 CSS 颜色值（如 #000、rgba(0, 0, 0, 0.5)）。

注意: blur-radius 必须使用长度单位（如 px、rem），而不能使用百分比值。

对于 drop-shadow() 函数，小伙伴们还需要清楚以下几点。

drop-shadow() 不受元素边框或背景的影响，它只会针对元素的内容和透明区域。
drop-shadow() 支持硬件加速。不过如果阴影过于复杂，则可能会影响性能。

CSS drop-shadow() 摘要

属于	CSS 滤镜
使用频率	低
兼容性	查看
官方文档	查看
MDN	查看

CSS drop-shadow() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS drop-shadow() 函数是如何使用的。

示例 1：drop-shadow() 添加阴影效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

drop-shadow() 为图像添加阴影效果

分析：

drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)) 表示为图片添加了一个半透明的阴影效果。该阴影的水平和垂直偏移都是 5px，而模糊半径是 10px。

示例 2：drop-shadow() 为文本添加阴影

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1 {
            font-size: 36px;
            color: hotpink;
            filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.7));
        }
    </style>
</head>
<body>
    <h1>绿叶网</h1>
</body>
</html>

页面效果如下图所示。

drop-shadow() 为文本添加阴影

分析：

这里使用 drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.7)) 为文本添加了一个阴影效果。相比于 text-shadow，drop-shadow() 更适合创建复杂的文本样式。

示例 3：drop-shadow() 结合 CSS 动画

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            width: 100px;
            filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
            animation: shadowPulse 2s infinite;
        }
        @keyframes shadowPulse {
            0% { filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5)); }
            50% { filter: drop-shadow(6px 6px 15px rgba(0, 0, 0, 0.8)); }
            100% { filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5)); }
        }
    </style>
</head>
<body>
    <img src="imgs/python.svg" alt="">
</body>
</html>

页面效果如下图所示。

drop-shadow() 结合动画实现动态阴影

分析：

在这个例子中，我们使用 @keyframes 规则来创建了一个 CSS 动画。动画会无限循环播放，其中阴影会从较小模糊（5px）逐渐扩展到较大模糊（15px），并加深不透明度。