深入理解 CSS 三大shadow技术

一、阴影的基本概念与作用

CSS 阴影是一种视觉效果技术，用于增强页面元素的层次感、深度感和立体感，使界面更加生动和专业。它可以应用于文本、盒子元素以及不规则形状，帮助设计师实现丰富的视觉设计效果。

二、主要阴影类型详解

2.1 盒子阴影（box-shadow）

box-shadow 属性用于为元素添加阴影效果，可以是外阴影或内阴影，是最常用的阴影类型。

语法：

box-shadow: [inset] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] <color>;

参数说明：

• inset：可选关键字，将外阴影改为内阴影。

• offset-x：必填，水平阴影偏移量（正值向右，负值向左）。

• offset-y：必填，垂直阴影偏移量（正值向下，负值向上）。

• blur-radius：可选，模糊半径（值越大，阴影越模糊）。

• spread-radius：可选，阴影扩散半径（正值扩大阴影，负值缩小阴影）。

• color：可选，阴影颜色（默认与文本颜色相同）。

关键特性：

• 支持内外阴影（通过 inset 关键字）。

• 支持阴影扩散（通过 spread-radius 参数）。

• 基于元素的盒子模型，不考虑元素的透明度或不规则形状。

• 可以叠加多个阴影效果，用逗号分隔。

影响 box-shadow 的属性

• border-radius：阴影会跟随元素的圆角效果。

• transform：阴影会跟随元素的变换效果。

• opacity：不影响阴影的可见性（阴影是元素的一部分）。

• 当设置了 box-shadow 的元素被包裹在 overflow:hidden 的容器内时，其阴影部分将被裁剪，无法超出容器边界，导致阴影效果不完整。

CSS box-shadow 语法快速记忆指南

将 offset-x 和 offset-y 想象成为坐标：

• 坐标原点：元素盒子的左上角（与 CSS 中大多数定位系统一致）。

• x 轴方向：水平方向，向右为正（offset-x 正值），向左为负（offset-x 负值）。

• y 轴方向：垂直方向，向下为正（offset-y 正值），向上为负（offset-y 负值）。

这种类比直观地解释了阴影的偏移方向，例如 box-shadow: 5px 3px ... 表示阴影向右偏移 5px，向下偏移 3px。

视觉化记忆法

将语法结构想象成一个"阴影生成器"的配置流程：

• 选择阴影类型：是内阴影（inset）还是外阴影（默认）？

• 设定阴影位置：在坐标系统中确定位置（x, y）。

• 调整阴影形状：模糊程度（blur）和大小（spread）。

• 设置阴影颜色：选择合适的颜色。

示例

基本外阴影：

/* 基本外阴影 */
.box {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

内阴影：

/* 内阴影 */
.box-inset {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
}

多个阴影叠加

/* 多个阴影叠加 */
.box-multi {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 6px 20px rgba(0, 0, 0, 0.05);
}

阴影被隐藏

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

2.2 文字阴影（text-shadow）

text-shadow 属性用于为文本添加阴影效果，增强文本的可读性或视觉吸引力。

语法：

text-shadow: <offset-x> <offset-y> [<blur-radius>] <color>;

参数说明：

• offset-x：必填，水平阴影偏移量（正值向右，负值向左）。

• offset-y：必填，垂直阴影偏移量（正值向下，负值向上）。

• blur-radius：可选，模糊半径（值越大，阴影越模糊）。

• color：可选，阴影颜色（默认与文本颜色相同）。

关键特性：

• 仅应用于文本内容，不影响元素的其他部分。

• 支持叠加多个阴影效果。

• 不支持内阴影和阴影扩散。

• 添加 box-shadow 时，阴影会随容器形状被裁剪，而 text-shadow 则不会被裁剪。因此，当文本为完全透明或半透明时，阴影仍会透过文字显现出来。

示例：

基本文本阴影

/* 基本文本阴影 */
.text {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

多重文本阴影

.text-multi {
  text-shadow: 
    2px 2px 0px #ff0000,
    4px 4px 0px #00ff00,
    6px 6px 0px #0000ff;
}

透明度文本阴影

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 20%);
}

.my-element {
  font-size: 5em;
  font-weight: 900;
  line-height: 1.1;
  max-width: 40ch;
}

<h1 class="my-element">
  This text is semi-transparent, so the shadow can be seen through it
</h1>

2.3 滤镜阴影（filter: drop-shadow()）

filter: drop-shadow() 是 CSS 滤镜属性的一部分，用于为元素及其内容添加阴影效果，特别适用于不规则形状或半透明元素。

语法：

filter: drop-shadow(<offset-x> <offset-y> [<blur-radius>] <color>);

参数说明：

• offset-x：必填，水平阴影偏移量（正值向右，负值向左）。

• offset-y：必填，垂直阴影偏移量（正值向下，负值向上）。

• blur-radius：可选，模糊半径（值越大，阴影越模糊）。

• color：可选，阴影颜色（默认与文本颜色相同）。

关键特性：

• 考虑元素的透明度，只对不透明部分添加阴影。

• 跟随元素的实际形状（包括圆角、SVG 路径、clip-path 等）。

• 不支持内阴影和阴影扩散。

• 性能消耗相对较高（因为需要计算滤镜效果）。

典型应用场景：

• 为动态加载的图片添加阴影（如电商网站的商品图片）。

• 为不规则形状元素（如多边形、图标）添加阴影。

• 为半透明元素添加阴影。

示例：

不规则形状阴影

/* 不规则形状阴影 */
.irregular-shape {
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

图片阴影

/* 图片阴影 */
.product-image {
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2));
}

三、三种阴影的区别与比较

可访问 Can I Use 官网 查询更详细的兼容性信息。

四、实际应用技巧

4.1 示例：分层阴影效果

通过叠加多个阴影，可以创建更复杂的深度感：

.card {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 4px 8px rgba(0, 0, 0, 0.08);
}

4.2 示例：悬停增强效果

结合过渡效果，在悬停时增强阴影，提升交互体验：

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

4.3 示例：玻璃态效果（Glassmorphism）

结合背景模糊和阴影，实现现代的玻璃态效果：

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

4.4 示例：文本可读性增强

在浅色背景上使用深色文本阴影，或在深色背景上使用浅色文本阴影，增强文本可读性：

/* 浅色背景上的文本 */
.light-bg-text {
  color: #333;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

/* 深色背景上的文本 */
.dark-bg-text {
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

4.5 示例：卡片组件

结合过渡效果，在悬停时增强阴影，提升交互体验：

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

4.6 示例：动态图片阴影

为动态加载的图片添加阴影，提升视觉体验：

.product-image {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.15));
}

总结

CSS 阴影是创建视觉层次感和深度的强大工具，通过合理使用 box-shadow、text-shadow 和 filter: drop-shadow() ，可以实现各种精美的视觉效果。理解它们的区别和适用场景，将帮助你在实际项目中做出最佳选择，创造出既美观又高性能的用户界面：

• 对于标准盒子元素，优先使用 box-shadow。

• 对于文本内容，使用 text-shadow。

• 对于不规则形状或透明元素，使用 filter: drop-shadow()。

彩蛋

本文于 Cnb 平台完整呈现了 CSS Shadow 属性的示例代码，欢迎前往阅读《CSS Shadow 属性详解完整示例》以获取详尽内容。