CSS 多层阴影生成器

功能

• 水平 / 垂直偏移、模糊半径、扩散半径全部可调
• 阴影颜色用取色器选，透明度单独一条
• 外阴影、内阴影、内外都有三种类型
• 2–5 层叠加，层与层之间按倍数递增、逐层变淡
• 五种预设：卡片、悬浮、按下、内凹、长阴影
• 改任何一项都实时重画预览，不需要点生成
• 下方给出可复制的 box-shadow 与圆角声明
• 代码带语法着色，复制按钮一步拿走
• 所有计算在浏览器本地完成，不上传任何东西

使用方法

1. 先选类型：外阴影、内阴影还是两者都有
2. 拖偏移、模糊、扩散，点开取色器调颜色与透明度
3. 需要更柔和的层次就加层数，调逐层倍数
4. 想快速起手就从预设挑一个，再微调；最后复制 CSS

常见问题

为什么把扩散半径调成负数，阴影没有变成内阴影？

因为内阴影是另一个关键字：`inset`。负的扩散半径只是让阴影四周缩进（甚至缩进到看不见），它仍然画在盒子外面；只有写 `inset`，阴影才画在内容区之内、并按相反的方向投影。这两者视觉上有时「看着差不多」，所以很容易被误用，本工具把内阴影单列成一个类型就是为了不让人踩这个坑。

多层阴影谁在上面？

先写的在上面，与 `z-index`「数字大的在上」相反。`box-shadow: a, b` 里 `a` 盖住 `b`。所以做「一层实、一层散」的层次时，通常把实的那层写在前面、散的那层写在后面（也常常让它更淡）。本工具按基准层在前、后续层依次在后输出，所以越往后的层越大越淡。

长阴影为什么模糊是 0？

长阴影（long shadow）是硬边的，靠一串无模糊、逐像素叠加的阴影拼出斜向的长条，模糊一大就散了。预设里的长阴影把模糊设成 0，你可以再调偏移方向与层数做出不同长度。

阴影会不会影响布局？

不会。`box-shadow` 是画出来的，不占布局空间，也不会撑大盒子或触发滚动条 —— 与 `border` 不同。但它会绘制在相邻内容之上，阴影很大时可能盖到旁边的元素，这时要么减小扩散，要么给相邻元素更高的层级。