CSS 盒阴影生成器

完整语法为 box-shadow: inset? <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>。 其中 inset 为可选关键字（置于最前），表示内阴影；offset-x 与 offset-y 必填， 控制阴影的水平和垂直位移；blur-radius 与 spread-radius 可选，分别控制模糊与扩散程度； color 为阴影颜色。多层阴影用逗号分隔，从前到后依次叠加。

模糊半径（blur-radius）：控制阴影边缘的模糊程度，值越大阴影越柔和、扩散范围越广。值为 0 时阴影边缘锐利。
扩散半径（spread-radius）：控制阴影的整体尺寸缩放，正值让阴影放大、负值让阴影缩小。 与模糊半径不同，扩散半径不改变模糊程度，只改变阴影的"大小"。例如 0 4px 6px -1px 中的 -1px 就是负扩散半径，让阴影略小于元素本身，避免阴影在两侧溢出。

默认的 box-shadow 是外阴影（outset），阴影投射到元素外部。inset 关键字将阴影改为内阴影， 阴影出现在元素内部，从边框向内扩散。内阴影常用于营造"凹陷"效果，如输入框聚焦凹陷、按钮按下的立体感、 卡片内嵌的层次感。语法示例：box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);。

多层阴影用逗号分隔，浏览器从前到后依次绘制，第一层在最上层。多层阴影常用于营造更真实的深度感—— 单层阴影往往显得生硬，而"近处小模糊 + 远处大模糊"的双层组合更接近现实物理光照。 例如 Material Design 的卡片阴影：box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);。 本工具支持任意层数的阴影叠加，每层可独立启用/禁用。

推荐使用 rgba() 或 hsl() 等带透明度的颜色格式，而非纯 hex。 阴影通常是半透明的（黑色 10% 透明度比纯黑更自然），rgba(0,0,0,0.1) 可以让背景色透过来， 营造柔和的层次感。纯黑 #000000 的阴影过于生硬，仅适合"硬阴影"等特殊设计风格。 注意：本工具的颜色输入框同时支持 hex 与 rgba 格式，但颜色拾取器仅支持 hex，rgba 需手动输入。

Material Design 的阴影分多个高度等级（elevation），每个等级有对应的阴影配方：
① dp1：0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
② dp2：0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
③ dp4：0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
④ dp8：0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
本工具的"卡片"与"浮起"预设接近 dp2 与 dp4 等级，可直接作为起点再微调。

box-shadow 是 CSS3 的成熟特性，所有现代浏览器（Chrome、Firefox、Safari、Edge）全面支持， IE9+ 也已支持（需注意 IE 不支持 inset 关键字以外的部分新特性）。 inset、多层阴影、负扩散半径等特性在 IE9+ 均可用。 移动端 iOS Safari 与 Android Chrome 完全支持。无需添加浏览器前缀，可直接用于生产环境。

不会。本工具完全在浏览器内运行，所有阴影参数调节与 CSS 生成由 JavaScript 在你本地执行， 不会发送任何配置或代码到服务器。全程零网络请求，可离线使用。