CSS 阴影生成器能做什么？
box-shadow 阴影生成器可视化调节 CSS 盒子阴影：水平偏移、垂直偏移、模糊半径、扩散半径、颜色，支持内外阴影和多层阴影叠加，实时预览一键复制。阴影是界面「立体感」的来源——按钮按下去、卡片浮起来、输入框凹进去，全靠阴影表达。手写 box-shadow 参数要反复刷新调试，用生成器拖一拖就完成。
使用步骤
- 打开 CSS 阴影生成器
- 拖动水平/垂直偏移滑块，确定阴影方向
- 拖动模糊半径控制阴影柔和度
- 拖动扩散半径控制阴影大小
- 设置阴影颜色和透明度（黑色 10%-30% 最自然）
- 选择内阴影（inset）或外阴影
- 点击「添加阴影」叠加多层，做出更真实的层次
- 复制 CSS 代码
阴影设计规范
- 小元素（按钮、输入框）：偏移 1-2px、模糊 2-4px，紧实低调
- 中等卡片：偏移 4px、模糊 12px、透明度 15%，轻微悬浮感
- 弹窗、下拉：偏移 8px、模糊 24px、透明度 20%，明显浮起
- Material Design 阴影层级：dp 值越大阴影越扩散，与海拔对应
- 内阴影：输入框凹陷、按压效果（inset 关键字）
多层阴影技巧
真实的阴影不是一层——比如卡片可以叠加两层：第一层小而紧（0 1px 2px rgba(0,0,0,0.1)）表现贴地感，第二层大而散（0 8px 24px rgba(0,0,0,0.12)）表现悬浮感。多层阴影用逗号分隔，效果比单层自然得多，生成器里可以逐层添加调整。
注意事项与边界情况
- 阴影颜色别用纯黑：rgba(0,0,0,0.1-0.25) 更自然，纯黑显脏
- 深色背景上的阴影几乎不可见，改用高光或描边表达层次
- box-shadow 不影响布局，不会挤开其他元素
- 圆角元素的阴影自动跟随圆角，无需额外处理
- 大量阴影元素在低端设备滚动时可能掉帧，超长列表慎用
常见问题
- 偏移、模糊、扩散分别是什么？
- 偏移定方向位置、模糊定边缘柔和度、扩散定阴影整体大小，三者配合调出想要的效果。
- 怎么做按下的效果？
- inset 内阴影 + 缩小偏移，配合 :active 伪类切换。
- 阴影太黑了怎么调？
- 降低透明度到 0.1-0.2，或用背景色系的深色代替纯黑。
- 能给文字加阴影吗？
- 那是 text-shadow 属性，语法类似但更简单。
- 多层阴影怎么写？
- 多组值用逗号分隔：box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.12);
实战案例：给产品卡片做悬浮层次
需求：电商卡片列表，悬停时轻微浮起。做法：默认态一层贴地阴影 0 1px 2px rgba(0,0,0,0.1)，悬停态换成两层——0 1px 2px 加 0 8px 24px rgba(0,0,0,0.12)，配合 0.2 秒过渡。这里有个数层的恒等式：阴影层数=顶层逗号数+1，注意 rgba(0,0,0,0.1) 括号里的逗号不算数——'0 1px 2px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.12)' 顶层 1 个逗号所以是 2 层，新手数出 7 层就是把括号内逗号算进去了。
常见错误
- 纯黑阴影 rgba(0,0,0,0.5) 太重显脏，0.1-0.25 透明度才自然
- 深色背景上用黑色阴影：完全看不见，改用亮色描边或内发光
- spread 值给太大：阴影变成黑圈糊住周围，配合模糊半径等比调整
- 给每个列表项都加多层阴影：低端机滚动掉帧，能用一层别用两层
- 用 box-shadow 做图片投影：PNG 透明图的阴影是方块，要用 drop-shadow
进阶方向
- 内阴影（inset）做输入框凹陷、按钮按压态，一套体系两种深度
- 阴影+transform: translateY(-2px) 组合做悬停浮起，比只加阴影更灵动
- 暗色主题的阴影策略：降低透明度、扩大模糊半径，或改用高光边框
- 阴影体系化：定义 3 级海拔（低/中/高）复用全站，Material Design 就是这么做的
总结
box-shadow 是界面层次的语言：小阴影贴地、大阴影悬浮、内阴影凹陷。用生成器多层叠加、控制透明度，立体感立刻出来——阴影调好了，设计档次就上去了。