精通 CSS 阴影与滤镜：为你的设计增添深度与风格

Source: Dev.to

盒子阴影 (box-shadow)

box-shadow 属性是现代 UI 设计中最常用的样式技术之一。

语法

box-shadow: offset-x offset-y blur-radius spread-radius color;

示例

.card {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

• offset-x & offset-y → 阴影的位置
• blur-radius → 阴影边缘的柔软程度
• spread-radius → 阴影是扩大还是收缩
• color → 可以是纯色或透明色

专业技巧：分层阴影

使用细腻的、分层的阴影来实现真实感，而不是单一的厚重阴影：

.card {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.1);
}

这种层叠模仿了光线在现实世界中的行为。

内嵌阴影

并非只能使用外部阴影。使用 inset 关键字，阴影会出现在元素内部。

.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

非常适合创建按下按钮的效果或在容器内部营造细微的深度感。

文本阴影 (text-shadow)

阴影同样可以为文字增色。

基本示例

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

最适合用于对比度强的主标题。

使用多重阴影实现轮廓效果

h1 {
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

此技巧让文字呈现类似描边的外观。

用于图像和元素的 CSS 滤镜

滤镜可以对元素施加模糊、亮度、灰度等视觉效果。

语法

filter: function(value);

常用滤镜函数

• blur(5px) – 使元素柔化
• brightness(1.2) – 调整亮度（更亮或更暗）
• contrast(150%) – 提升对比度
• grayscale(100%) – 去除颜色
• sepia(100%) – 复古效果
• hue-rotate(90deg) – 色相偏移
• drop-shadow(...) – 根据元素形状产生阴影

示例

img {
  filter: grayscale(100%) brightness(1.2);
}

这会让图像变成黑白并略微提升亮度。

drop-shadow() 滤镜 vs box-shadow

drop-shadow() 滤镜与 box-shadow 不同：它会根据元素的真实形状（包括透明区域）来投射阴影（非常适合带透明度的 PNG 或 SVG）。

.logo {
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
}

这里的阴影紧贴图像边缘，而不是其外接矩形——非常适合图标和徽标。

组合阴影与滤镜

可以像堆叠多个盒子阴影一样堆叠多个滤镜。

.hero img {
  filter: grayscale(70%) blur(2px) brightness(1.1);
}

再配合细腻的 box-shadow，即可实现高级的设计效果。

性能考虑

虽然阴影和滤镜视觉效果出色，但过度使用会影响渲染性能，尤其在移动设备上。最佳实践：

• 动画应使用 opacity 和 transform，而不是 blur() 等重滤镜。
• 将阴影的 blur-radius 保持在合理范围（尽量避免 > 50 px）。
• 有策略地使用滤镜（例如悬停效果、图像美化）。

创意使用场景

• 玻璃拟态（Glassmorphism） – 结合阴影、模糊滤镜和半透明，实现磨砂玻璃效果。
• 新拟态（Neumorphism） – 在浅色背景上使用双重内嵌与外部阴影，营造柔和的 3D UI。
• 主题化图像滤镜 – 对徽标使用灰度以降低视觉冲击，对悬停状态使用鲜艳滤镜。

最后感想

阴影和滤镜不仅是装饰，它们是引导注意力、营造层次感和设定氛围的工具。适度使用，它们能让你的设计更现代、真实且友好。尝试组合 box-shadow、text-shadow 与 CSS 滤镜效果，打造既突出又具立体感的界面。

查看 YouTube 播放列表 以获取从基础到高级的精彩 CSS 内容。

在 CodenCloud 频道上探索更多。