box-shadow: [inset] <x-offset> <y-offset> <blur-radius> <spread-radius> <color>;

• inset（可选）：将外部阴影变为内部阴影
• x-offset：水平偏移，正值向右，负值向左
• y-offset：垂直偏移，正值向下，负值向上
• blur-radius：模糊半径，值越大阴影越模糊柔和
• spread-radius：扩散半径，正值扩大阴影，负值缩小
• color：阴影颜色，推荐使用rgba格式控制透明度
多层阴影用逗号分隔，如：box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);

真实世界的阴影通常不是单一光源产生的。推荐使用多层阴影叠加来模拟真实光影：

1. 第一层：较大的模糊半径 + 较低的透明度 → 模拟环境光
2. 第二层：较小的偏移 + 中等模糊 → 模拟主光源
3. 第三层（可选）：极小的偏移 + 小模糊 → 增强立体感

可以试试本工具的"真实投影"预设，感受多层阴影带来的丰富层次。

内阴影(inset)在UI设计中非常实用：

• 输入框凹陷效果：让表单输入框看起来向内凹陷
• 按下状态按钮：模拟按钮被按下的视觉效果
• 图片/卡片内边框：创建优雅的内嵌边框
• 容器深度感：让容器看起来有深度

内阴影与外阴影可以同时使用，创造丰富的视觉层次。

强烈推荐使用 rgba 或 hsla 格式设置阴影颜色，因为它们支持alpha透明度通道。

使用rgba的好处：
• 独立控制颜色和透明度，更加灵活
• 阴影的半透明效果更自然
• 在不同背景上都能获得良好的视觉效果

示例：rgba(0, 0, 0, 0.15) 比 #00000026（8位hex）更直观易读。

合理使用box-shadow通常不会造成性能问题，但需要注意：

• 大面积模糊（blur值很大）+ 高频率重绘可能影响性能
• 过多元素同时使用复杂阴影会增加GPU负担
• 在动画中频繁改变box-shadow可能引起卡顿
• 移动端设备对阴影渲染更敏感

优化建议：使用will-change: box-shadow提示浏览器，或将动画阴影改为filter: drop-shadow()（对不规则形状更友好）。

扩散半径(spread-radius)控制阴影的大小：

• 正值：阴影向四周扩展，比元素本身更大
• 负值：阴影向内收缩，比元素本身更小
• 0：阴影与元素尺寸一致

扩散半径常用于：
• 模拟不同距离的光源效果
• 创建仅在一侧出现的阴影（配合偏移使用）
• 微调阴影的视觉重量