第15篇：阴影与视觉效果
阴影是赋予界面深度和层次感的关键手段。从简单的盒子阴影到多层叠加的复杂效果，从文本阴影到 CSS 滤镜，掌握这些视觉工具能让你的设计从"平面"走向"立体"。
学习目标
- 掌握 box-shadow 的语法和多层阴影叠加
- 理解内阴影（inset）的使用场景
- 学会用 text-shadow 创造文字特效
- 掌握 filter 属性的常用滤镜效果
- 了解 backdrop-filter 的毛玻璃效果
- 学会用阴影创造 Material Design 风格的 elevation 系统
核心知识点
一、box-shadow 盒子阴影
基础语法
/* 语法：x偏移 y偏移 模糊半径 扩散半径 颜色 */.box{box-shadow:2px 4px 8pxrgba(0,0,0,0.15);/* x y blur spread color */}各参数说明：
| 参数 | 说明 | 必须 |
|---|---|---|
x-offset | 水平偏移，正值向右 | ✅ |
y-offset | 垂直偏移，正值向下 | ✅ |
blur-radius | 模糊半径，越大越模糊 | ❌（默认 0） |
spread-radius | 扩散半径，正值扩大，负值收缩 | ❌（默认 0） |
color | 阴影颜色 | ❌（默认 inherit） |
基础阴影效果
/* 轻微阴影 — 卡片 hover */.card{box-shadow:0 2px 4pxrgba(0,0,0,0.1);}/* 中等阴影 — 普通卡片 */.card-elevated{box-shadow:0 4px 12pxrgba(0,0,0,0.15);}/* 强烈阴影 — 模态框/浮层 */.modal{box-shadow:0 16px 48pxrgba(0,0,0,0.2);}多层阴影叠加
/* 多层阴影用逗号分隔，先写的在上层 */.realistic-card{box-shadow:0 1px 2pxrgba(0,0,0,0.07),0 2px 4pxrgba(0,0,0,0.07),0 4px 8pxrgba(0,0,0,0.07),0 8px 16pxrgba(0,0,0,0.07),0 16px 32pxrgba(0,0,0,0.07);}💡 多层不同模糊半径的阴影叠加，比单层阴影更自然，更接近真实世界的光照效果。
内阴影（inset）
/* 凹陷效果 */.inset-box{box-shadow:inset 0 2px 4pxrgba(0,0,0,0.1);}/* 输入框聚焦 */.input-focus:focus{box-shadow:inset 0 0 0 2px #4a90d9;outline:none;}/* 复合效果：外阴影 + 内阴影 */.complex{box-shadow:0 4px 12pxrgba(0,0,0,0.1),/* 外层投影 */inset 0 1px 0rgba(255,255,255,0.5);/* 内层高光 */}单边阴影
/* 底部阴影 */.bottom-shadow{box-shadow:0 4px 6px -2pxrgba(0,0,0,0.1);/* y blur spread *//* 负的 spread 让阴影只在一侧 */}/* 顶部阴影 */.top-shadow{box-shadow:0 -4px 6px -2pxrgba(0,0,0,0.1);}二、text-shadow 文字阴影
/* 基础阴影 */.text-shadow{text-shadow:2px 2px 4pxrgba(0,0,0,0.3);}/* 发光效果 */.text-glow{color:#fff;text-shadow:0 0 10px #4a90d9,0 0 20px #4a90d9;}/* 浮雕效果 */.text-emboss{color:#ccc;text-shadow:-1px -1px 0 #fff,1px 1px 0 #999;}/* 3D 立体文字 */.text-3d{text-shadow:1px 1px 0 #ddd,2px 2px 0 #ccc,3px 3px 0 #bbb,4px 4px 0 #aaa;}三、Material Design Elevation 系统
用 box-shadow 模拟不同高度层级：
:root{--shadow-1:0 1px 3pxrgba(0,0,0,0.12),0 1px 2pxrgba(0,0,0,0.24);--shadow-2:0 3px 6pxrgba(0,0,0,0.15),0 2px 4pxrgba(0,0,0,0.12);--shadow-3:0 10px 20pxrgba(0,0,0,0.15),0 3px 6pxrgba(0,0,0,0.10);--shadow-4:0 15px 25pxrgba(0,0,0,0.15),0 5px 10pxrgba(0,0,0,0.05);--shadow-5:0 20px 40pxrgba(0,0,0,0.2);}.elevation-1{box-shadow:var(--shadow-1);}/* 按钮 */.elevation-2{box-shadow:var(--shadow-2);}/* 卡片 */.elevation-3{box-shadow:var(--shadow-3);}/* 下拉菜单 */.elevation-4{box-shadow:var(--shadow-4);}/* 对话框 */.elevation-5{box-shadow:var(--shadow-5);}/* 模态框 *//* 悬停提升 */.card{box-shadow:var(--shadow-1);transition:box-shadow 0.3s ease;}.card:hover{box-shadow:var(--shadow-3);}四、CSS filter 滤镜
/* 模糊 */.blur{filter:blur(4px);}/* 亮度 */.bright{filter:brightness(1.2);}.dark{filter:brightness(0.8);}/* 对比度 */.contrast{filter:contrast(1.2);}/* 灰度 */.grayscale{filter:grayscale(100%);}/* 色相旋转 */.hue-rotate{filter:hue-rotate(90deg);}/* 反色 */.invert{filter:invert(100%);}/* 饱和度 */.saturate{filter:saturate(1.5);}.desaturate{filter:saturate(0);}/* 深褐色 */.sepia{filter:sepia(100%);}/* 组合滤镜 */.combo{filter:brightness(1.1)contrast(1.2)saturate(1.1);}悬停变灰效果：
.gallery img{filter:grayscale(100%);transition:filter 0.3s;}.gallery img:hover{filter:grayscale(0);}五、backdrop-filter 背景滤镜（毛玻璃效果）
/* 毛玻璃效果 */.glass{background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);/* Safari */border:1px solidrgba(255,255,255,0.3);}/* 深色毛玻璃 */.glass-dark{background:rgba(0,0,0,0.3);backdrop-filter:blur(16px)saturate(180%);-webkit-backdrop-filter:blur(16px)saturate(180%);}⚠️
backdrop-filter需要元素背后有内容才能看到效果。如果元素背景是不透明的，滤镜将不可见。
六、阴影的最佳实践
颜色选择
/* ❌ 避免纯黑色阴影 */.bad-shadow{box-shadow:0 4px 8pxrgba(0,0,0,0.3);}/* ✅ 使用与主题色相协调的阴影 */.good-shadow{box-shadow:0 4px 8pxrgba(74,144,217,0.2);}/* ✅ 或使用低透明度的深色 */.neutral-shadow{box-shadow:0 4px 8pxrgba(15,23,42,0.15);}性能注意
/* 模糊半径过大会影响性能 */.expensive{box-shadow:0 0 100pxrgba(0,0,0,0.5);/* 谨慎使用大 blur */}/* 动画建议只改变 opacity，而非 shadow 属性 */.animated-shadow{transition:opacity 0.3s;box-shadow:0 4px 12pxrgba(0,0,0,0.15);}动手练习
练习 1：Elevation 卡片系统
创建一套 5 级阴影的卡片系统：
- 定义 5 个层级的 CSS 变量
- 不同重要程度的卡片使用不同层级
- 悬停时卡片提升一个层级，有过渡动画
练习 2：毛玻璃导航栏
实现一个固定在顶部的导航栏：
- 背景半透明 + backdrop-filter 模糊
- 底部有微妙的阴影分隔
- 滚动时阴影加深
练习 3：图片滤镜画廊
创建一个图片画廊：
- 默认状态图片为灰度
- 悬停时恢复彩色，并添加亮度提升
- 选中状态添加不同的滤镜效果
常见误区 ⚠️
| 误区 | 真相 |
|---|---|
“box-shadow会影响布局（占据空间）” | 不会！阴影不占据空间，不影响元素尺寸和文档流 |
“box-shadow的 spread 可以为负” | 可以！负的 spread 会让阴影收缩 |
| “多层阴影的顺序无所谓” | 顺序重要，先写的在上层 |
“text-shadow可以设置 spread” | 不可以！text-shadow 没有 spread 参数 |
“filter和backdrop-filter一样” | filter作用于元素本身；backdrop-filter作用于元素背后的内容 |
“backdrop-filter不需要前缀了” | Safari 仍需要-webkit-backdrop-filter |
| “阴影颜色必须用黑色” | 可以用任何颜色，使用与主题协调的颜色更自然 |
“box-shadow可以过渡动画” | 可以！但性能开销较大，动画时建议只改变 opacity 或使用 transform |
| “内阴影和外阴影不能同时用” | 可以同时使用，用逗号分隔 |
速查卡片 📋
box-shadow 语法
box-shadow:x-offset y-offset blur spread color inset;常用阴影模板
--shadow-sm:0 1px 2pxrgba(0,0,0,0.05);--shadow-md:0 4px 6pxrgba(0,0,0,0.1);--shadow-lg:0 10px 15pxrgba(0,0,0,0.1);--shadow-xl:0 20px 25pxrgba(0,0,0,0.15);filter 滤镜速查
filter:blur(4px);filter:brightness(1.2);filter:contrast(1.2);filter:grayscale(100%);filter:hue-rotate(90deg);filter:invert(100%);filter:saturate(1.5);filter:sepia(100%);毛玻璃模板
.glass{background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);border:1px solidrgba(255,255,255,0.3);}扩展阅读
- MDN: box-shadow
- MDN: text-shadow
- MDN: filter
- MDN: backdrop-filter
- Material Design Elevation（英文）
📌配套代码：
- CODE/15/shadow-system.html — 阴影层级系统与 elevation 演示
- CODE/15/filter-effects.html — 滤镜与毛玻璃效果演示
🎉下一步：进入 第16篇：文档流与浮动，学习 CSS 最核心的布局基础——文档流。
