🎯 工具功能
在线Box Shadow生成器是一款专为CSS box-shadow属性设计的可视化参数调节工具。Box-shadow是CSS3中用于为元素添加阴影效果的重要属性，通过设置阴影的偏移量、模糊半径、扩散半径和颜色，可以创造出从微妙的立体感到强烈的发光效果等多种视觉层次。本工具提供图形化滑块和输入框，所有参数调节即时反映在预览元素上，支持内阴影（inset）、多重阴影叠加，并一键生成标准CSS代码，是UI设计师和前端开发者调整视觉效果的得力助手。
💡 阴影设计哲学：好的阴影设计遵循现实世界的物理规律——光源位置决定阴影方向，距离决定模糊程度。在Material Design中，阴影高度（elevation）用于表达元素的层级关系，阴影越深越模糊表示元素离表面越远。合理利用阴影可以显著提升UI的质感和层次感。
📖 使用教程
场景：为卡片组件设计提升层次感的阴影效果
1
设置基础偏移量 — 打开工具，你会看到一个预览方块和若干参数调节滑块。首先调整「水平偏移量」（X轴）为 0px，「垂直偏移量」（Y轴）为 4px。这意味着阴影将出现在卡片正下方，模拟顶部光源照射效果。负值则会让阴影出现在相反方向。
2
调节模糊和扩散 — 将「模糊半径」设置为 6px——值越大阴影边缘越柔和。「扩散半径」设置为 0px（不扩散），这样阴影和元素大小一致。如果想制作更柔和的阴影，可以增加模糊半径；如果想制作更锐利的阴影，减小模糊半径。颜色设置为 rgba(0, 0, 0, 0.1)（10%不透明度的黑色），预览区会显示一个带有柔和阴影的卡片效果。
3
添加悬停效果 — 利用工具生成两组阴影参数：一组是正常状态（偏移量0,4，模糊6，颜色rgba(0,0,0,0.1)），另一组是悬停状态（偏移量0,8，模糊15，颜色rgba(0,0,0,0.2)）。然后使用CSS过渡实现平滑动画：
.card {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
这样当用户悬停在卡片上时，卡片仿佛被抬起，获得极佳的交互相馈体验。💡 使用技巧
- 内阴影效果：勾选「inset」可以将阴影从外部改为内部，适合制作凹陷效果（如输入框内嵌阴影、按钮按下状态）。
- 多重阴影：用逗号分隔可以叠加多个阴影，创造更丰富的光影效果。例如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); 类似Material Design的两层阴影系统。
- 彩色阴影：不要局限于黑色阴影，使用彩色阴影（如与主题色匹配的彩色）可以创造独特的视觉效果。例如 rgba(102, 126, 234, 0.4) 产生紫色调的阴影。
- 发光效果：将水平和垂直偏移设为0，设置较大的模糊半径和使用亮色，可以模拟霓虹灯发光效果。如 box-shadow: 0 0 20px #00ff00 产生绿色发光。
📋 常见场景
| 场景 | 说明 | 示例 |
|---|---|---|
| 卡片层级设计 | 按钮/卡片/模态框不同阴影高度 | Material Design层级 |
| 按钮交互反馈 | 按钮悬停和点击状态的阴影变化 | 按下时内阴影 |
| 霓虹发光效果 | 用彩色阴影模拟发光文字 | 游戏UI中的发光按钮 |
| 输入框聚焦 | 输入框聚焦时外发光提示 | focus时蓝色阴影 |
| 图片漂浮效果 | 图片或产品展示的漂浮阴影 | 电商产品图阴影 |
❓ 常见问题
Q: box-shadow和drop-shadow有什么区别？
A: box-shadow作用于元素的外边界框（矩形），而filter: drop-shadow() 作用于元素内容的实际轮廓（包括透明PNG的不透明部分）。对于不规则形状（如透明背景的PNG图标），drop-shadow 能生成贴合形状的阴影效果。
Q: 阴影会影响页面性能吗？
A: 过多或过大的阴影可能会影响页面渲染性能，特别是在移动设备上。建议：避免在大量元素上同时使用大模糊半径的阴影；使用 will-change: transform 提示浏览器优化；使用伪元素模拟阴影有时性能更好。
Q: 如何制作只有一个方向有阴影的效果？
A: 使用负的扩散半径可以压缩阴影。例如 box-shadow: 0 10px 10px -5px rgba(0,0,0,0.3); 中的 -5px 扩散半径使得阴影只出现在底部方向，其他方向被压缩掉。