box-shadow：CSS 阴影的基础语法
box-shadow 是 CSS3 引入的盒阴影属性，用于为元素添加投影效果，是营造界面层次感与深度感的核心工具。它的完整语法看似简单，但参数组合千变万化。
box-shadow: inset? <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>;各参数的含义：
| 参数 | 是否必填 | 作用 | 取值范围 |
|---|---|---|---|
inset | 可选 | 内阴影关键字，置于最前 | 关键字，无值 |
offset-x | 必填 | 水平偏移，正值向右 | 任意长度值 |
offset-y | 必填 | 垂直偏移，正值向下 | 任意长度值 |
blur-radius | 可选 | 模糊半径，值越大越柔和 | 0 到正无穷 |
spread-radius | 可选 | 扩散半径，正值放大、负值缩小 | 任意长度值 |
color | 可选 | 阴影颜色，默认取 color 属性 | 任意颜色值 |
配套工具：CSS 盒阴影生成器
模糊半径 vs 扩散半径：两个容易混淆的参数
初学者最容易混淆 blur-radius（模糊半径）和 spread-radius（扩散半径），它们都影响阴影的”大小”，但机制完全不同。
模糊半径控制阴影边缘的模糊程度。值为 0 时阴影边缘锐利如刀切；值越大，阴影边缘越柔和，整体视觉范围也随之扩大。模糊的本质是高斯模糊算法——在阴影边缘的像素附近做加权平均，产生从有色到透明的渐变过渡。
扩散半径控制阴影的整体尺寸缩放，不影响模糊程度。正值让阴影在每个方向上扩大指定像素，负值则缩小。扩散半径改变的是阴影的”实体范围”，而非边缘的柔和度。
一个典型的组合是 0 4px 6px -1px rgba(0,0,0,0.1)：4px 下移、6px 模糊、-1px 负扩散让阴影略小于元素本身，避免阴影在左右两侧溢出。这是 Tailwind CSS 默认阴影的配方。
inset 内阴影：凹陷效果的实现
默认的 box-shadow 是外阴影（outset），阴影投射到元素外部。添加 inset 关键字后，阴影改为内阴影，从元素边框向内扩散。
/* 内阴影：模拟输入框凹陷 */
box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);内阴影的参数语义与外阴影一致，但方向相反：offset-y 为正值时，阴影出现在元素顶部内侧（模拟光从下方照射的凹陷感）。内阴影常用于：
- 输入框聚焦时的凹陷反馈
- 按钮按下时的立体凹陷
- 卡片内嵌的层次感
- 模拟”刻印”或”雕刻”效果
内外阴影可以混用，用逗号分隔：box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.3)，同时拥有外投影与内高光。
多层阴影叠加：真实深度感的秘诀
单层阴影往往显得生硬——现实中的物体受环境光、直射光、反射光共同影响，投影是多个光源的叠加。CSS 允许用逗号分隔多层阴影，浏览器从前到后依次绘制，第一层在最上层。
/* 双层阴影：近处小模糊 + 远处大模糊 */
box-shadow:
0 2px 4px rgba(0,0,0,0.08), /* 近处：清晰的小阴影 */
0 4px 12px rgba(0,0,0,0.06); /* 远处：柔和的大阴影 */这种”近处小模糊 + 远处大模糊”的双层组合更接近现实物理光照。近处阴影模拟直射光产生的锐利投影，远处阴影模拟环境光产生的柔和漫射。多层阴影是 Material Design、Apple HIG 等设计体系的核心技巧。
Material Design 阴影体系：elevation 等级
Google 的 Material Design 将阴影分为多个高度等级（elevation），每个等级对应一组精确的阴影配方，形成系统化的深度语言：
| 等级 | 阴影配方 | 适用场景 |
|---|---|---|
| dp1 | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) | 卡片悬停 |
| dp2 | 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) | 卡片默认、导航栏 |
| dp4 | 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) | 浮动按钮、对话框 |
| dp8 | 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) | 弹出菜单 |
| dp16 | 0 24px 48px rgba(0,0,0,0.30), 0 14px 20px rgba(0,0,0,0.22) | 全屏对话框 |
| dp24 | 0 32px 64px rgba(0,0,0,0.35), 0 20px 28px rgba(0,0,0,0.22) | 抽屉导航 |
Material Design 的阴影配方可直接用于生产环境，本工具的”卡片”与”浮起”预设接近 dp2 与 dp4 等级，可作为起点再微调。
阴影颜色选择：rgba vs hex 的设计考量
阴影颜色是决定阴影质感的关键参数。推荐使用 rgba() 或 hsl() 等带透明度的颜色格式，而非纯 hex。
半透明阴影更自然：rgba(0,0,0,0.1) 的黑色 10% 透明度阴影让背景色透过来，营造柔和的层次感。纯黑 #000000 的阴影过于生硬，仅适合”硬阴影”（neobrutalism）等特殊设计风格。
阴影颜色随深度变化：真实的阴影离物体越近越深、越远越浅。多层阴影中，近处阴影用较高透明度（如 0.12），远处阴影用较低透明度（如 0.06），模拟大气透视效果。
彩色阴影营造氛围：霓虹光效果用彩色阴影（如 rgba(0,200,255,0.8)），模拟发光体的光晕扩散。彩色阴影适用于 CTA 按钮、图标高亮、暗色模式下的发光强调。
性能与最佳实践
box-shadow 是 GPU 加速的合成属性，但在动画场景下仍需注意性能：
-
动画性能：为
box-shadow添加transition或animation时，浏览器会对每一帧重新光栅化阴影，可能造成卡顿。优化方案是用filter: drop-shadow()替代（支持 SVG 路径），或用伪元素叠加 + opacity 切换实现”预渲染两层阴影、切换透明度”的零光栅化动画。 -
will-change 提示：对频繁动画的阴影元素添加
will-change: box-shadow，让浏览器提前创建合成层。但不要滥用，过多的 will-change 会增加内存占用。 -
避免超大模糊半径：
blur-radius超过 100px 时，光栅化成本显著上升。超大模糊场景考虑用filter: blur()配合伪元素实现。 -
层叠上下文注意：
box-shadow不会创建新的层叠上下文，但若元素同时有transform、opacity等属性，需注意阴影可能被父元素的层叠上下文裁切。
应用场景与配套工具
CSS 盒阴影生成器适用于多种前端开发场景：
- 卡片设计：内容卡片的悬浮感与层次分离
- 按钮交互：hover/active 状态的阴影变化反馈
- Material Design：系统化应用 elevation 等级
- 毛玻璃效果：配合
backdrop-filter营造玻璃质感 - Neobrutalism：硬阴影风格的设计趋势
- 暗色模式：深色背景下的阴影配方调整
本工具支持多层阴影叠加、全参数调节、6 组预设效果与浅深双色预览背景，覆盖前端开发中的阴影设计需求。所有参数调节在浏览器本地完成，零上传零追踪。配合站内的 CSS 格式化工具 可进一步美化阴影代码，与 颜色工具 协同选择阴影配色。按钮、卡片等需要丰富视觉层次的元素，可叠加渐变叠加阴影背景生成器生成的渐变背景，渐变负责色彩过渡、阴影负责深度分离，二者协同营造接近 Material Design 的立体质感。同一元素上的文字可叠加文字浮雕阴影生成器为标题添加立体描边，盒阴影负责元素层次分离、文字阴影负责文字质感，二者分工互补。