⬛ Box-Shadow生成器
多层阴影 · 内阴影 · 实时预览
预览区
200×200
200×200
多层阴影 · 内阴影 · 实时预览
完整格式：box-shadow: [inset] X偏移 Y偏移 模糊 扩散 颜色。X/Y定义阴影位置，模糊控制边缘柔和度，扩散控制阴影大小，inset使阴影内显。
不会。box-shadow只是视觉绘制，不参与盒模型的尺寸计算，不会挤压或撑开其他元素。阴影稍微超出元素边界也不会触发滚动条或重叠问题。
多层阴影叠加效果更自然。例如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); 第一层近处浅影、第二层远处深影，模拟真实材质中的柔和阴影。
inset阴影用于制作凹陷效果：按钮按下状态、输入框内凹、卡片内描边、图片暗角等。配合正负X/Y偏移，还能做出单方向的内衬光影。
box-shadow跟随元素盒子边界，不跟随内容形状；drop-shadow会沿着元素实际的不透明像素（比如PNG透明图）生成阴影。做文字或抠图阴影时用drop-shadow更合适。
用多层扩散为0的同等颜色阴影叠加，例如：box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff; 层数越多、光晕越饱满。
会。阴影的绘制成本与被模糊的像素量成正比，过多的阴影层或超大模糊半径在移动端滚动时可能造成卡顿。建议每元素不超过3-4层，动画时用transform而不是频繁改阴影。
box-shadow是CSS3属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）全部支持，无需前缀。老代码里的-webkit-box-shadow已经不需要写了。
一条完整的 box-shadow 声明可以拆成 6 个部分：inset、X偏距、Y偏距、模糊半径、扩散半径、颜色。其中只有 X、Y 是必须的，其余都有默认值。
| 参数 | 取值 | 作用 | 默认值 |
|---|---|---|---|
| inset | 关键字 | 把阴影改为向内显示 | 无(外阴影) |
| X偏移 | 长度(px) | 阴影水平位置，正数向右 | 0 |
| Y偏移 | 长度(px) | 阴影垂直位置，正数向下 | 0 |
| 模糊半径 | 长度(px) | 模糊程度，越大边缘越柔和 | 0 |
| 扩散半径 | 长度(px) | 阴影大小，正数放大、负数缩小 | 0 |
| 颜色 | 颜色值 | 阴影颜色，可用rgba带透明度 | currentColor |
扩散半径常在"描边"场景用：当扩散为正值、模糊为0时，阴影就变成一条清晰的同色描边。
| Elevation | 典型用途 | 推荐写法 |
|---|---|---|
| 1 | 静止卡片、列表项 | 0 1px 3px rgba(0,0,0,0.12) |
| 6 | 悬浮菜单、下拉面板 | 0 6px 20px rgba(0,0,0,0.15) |
| 12 | 抽屉、浮出层 | 0 12px 30px rgba(0,0,0,0.2) |
| 24 | 模态弹窗、全屏浮层 | 0 24px 60px rgba(0,0,0,0.25) |
Material Design 的阴影规范就是典型：根据元素垂直高度分 1~24 层，每层一组精确阴影参数，层级越高代表元素离背景越远。
外阴影管"浮起"，内阴影管"凹陷"，两者可同时出现。一段声明里既能写外阴影也能写内阴影，用逗号分隔即可。
| 类型 | 视觉语言 | 典型场景 |
|---|---|---|
| 外阴影(outset) | 元素浮起、投影落在下方 | 卡片、按钮默认态、弹窗 |
| 内阴影(inset) | 元素凹陷、光影在内侧 | 按钮按下态、输入框、内描边 |
经典的"胶囊按钮"就是外阴影+内阴影组合：外层投影增加立体感，内层高光让按钮显得饱满。
阴影的绘制成本与被模糊的像素量成正比，超大模糊半径在低端安卓机上容易掉帧。
| 写法 | 开销 | 说明 |
|---|---|---|
| 静态 box-shadow | 低 | 只绘制一次，不产生重绘 |
| hover 动态改阴影 | 中 | 每次进入 hover 触发一次重绘 |
| 动画逐帧改阴影 | 高 | 每帧重绘，低端机易卡顿 |
| filter: drop-shadow | 中 | 按像素轮廓计算，适合抠图/文字 |
| 场景 | 推荐写法 |
|---|---|
| 扁平卡片 | 0 1px 3px rgba(0,0,0,0.08) |
| 悬浮卡片 | 0 4px 6px rgba(0,0,0,0.06), 0 12px 20px rgba(0,0,0,0.1) |
| 弹窗/浮层 | 0 10px 30px rgba(0,0,0,0.2) |
| 按钮按下 | inset 0 2px 4px rgba(0,0,0,0.2) |
| 发光按钮 | 0 0 8px #var, 0 0 16px #var |
| 头像白描边 | 0 0 0 3px #fff |
| 浏览器 | 版本 | 支持 |
|---|---|---|
| Chrome | 10+ | 完整支持 |
| Firefox | 4+ | 完整支持 |
| Safari | 5.1+ | 完整支持 |
| Edge | 12+ | 完整支持 |
| IE | 9+ | 需前缀，现代已忽略 |
1. 拖动滑块调整阴影参数。
2. 选择颜色并勾选内阴影。
3. 查看实时预览效果。
4. 复制生成的CSS代码。