什么是CSS 阴影生成器？
CSS Box Shadow 生成器，可视化创建盒子阴影效果。支持参数：水平偏移（offset-x）、垂直偏移（offset-y）、模糊半径（blur-radius）、扩展半径（spread-radius）、颜色、内阴影（inset）。实时预览效果，一键复制生成的 CSS 代码。支持多层阴影叠加。适用于卡片设计、按钮效果、浮层元素、深度感设计。所有生成在浏览器本地完成。
使用场景
- ◆卡片组件阴影效果
- ◆按钮悬停阴影
- ◆模态框浮层效果
- ◆Material Design 深度设计
- ◆CSS 艺术创作
如何使用？
- 1调节滑块设置阴影参数
- 2实时预览阴影效果
- 3添加多层阴影（可选）
- 4复制 CSS 代码
功能特点
- ✓可视化滑块
- ✓实时预览
- ✓多层阴影
- ✓颜色选择器
- ✓CSS 代码导出
常见问题
box-shadow 的 4 个参数分别是什么？
`box-shadow: offset-x offset-y blur-radius spread-radius color`。offset-x=水平偏移（正右负左），offset-y=垂直偏移（正下负上），blur=模糊半径（越大越模糊），spread=扩展半径（正值扩大，负值缩小）。
如何创建内阴影？
在 box-shadow 值前加 `inset` 关键字：`box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)`。内阴影在元素内部绘制，常用于凹陷效果。
如何添加多层阴影？
用逗号分隔多个阴影：`box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)`。第一个阴影在最上层。常用于创建更自然的深度感。
blur 和 spread 有什么区别？
blur 控制阴影边缘的模糊程度（0=硬边，值越大越柔和）。spread 控制阴影的大小（0=与元素同大，正值扩大，负值缩小）。两者独立作用。
Material Design 的阴影标准是什么？
Material Design 定义 24 级高度（elevation），每级对应不同阴影。例如 elevation 2（卡片）：`0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15)`。
为什么我的阴影看不到？
常见原因：(1) blur=0 且 spread=0 时阴影太小；(2) 颜色透明度太低（如 rgba(0,0,0,0.01)）；(3) 父元素 overflow:hidden 裁剪了阴影；(4) 偏移方向超出可视区域。