CSS 阴影生成器

什么是 box-shadow？

box-shadow 是 CSS3 提供的盒子阴影属性，用来给元素添加投影，是营造页面层次感、立体感和质感的利器。它的完整语法由五个主要参数组成：水平偏移（X，正值向右）、垂直偏移（Y，正值向下）、模糊半径（越大边缘越柔和）、扩散半径（正值让阴影变大、负值缩小）以及颜色，另外还可以通过 inset 关键字把阴影绘制在元素内部形成内阴影。

手写 box-shadow 时，最难把握的是「模糊多少像毛玻璃、扩散多少像边框」这类手感问题——参数写好后效果完全靠想象，来回改几十次才能调出想要的样子。本工具把全部参数做成滑块和色板：拖动滑块即可直观看到偏移方向、阴影柔和度和扩散大小，透明度滑块配合颜色选择器可以调出自然的投影，勾选「内阴影」即可切换凹陷效果。所有调整实时反映在预览区，并同步生成可直接使用的 CSS 代码，一键复制到项目即可。

使用步骤

1. 拖动「水平偏移」「垂直偏移」滑块调整阴影方向与距离；
2. 拖动「模糊半径」控制阴影柔和程度，「扩散半径」控制阴影大小；
3. 用色板选择阴影颜色，拖动「不透明度」滑块让投影更自然；
4. 需要凹陷效果时勾选「内阴影」复选框；
5. 预览区实时展示效果，点击「复制」按钮复制生成的 CSS 代码。

常见问题

box-shadow 的五个参数分别代表什么？

依次为水平偏移（正值阴影向右）、垂直偏移（正值阴影向下）、模糊半径（越大边缘越柔和）、扩散半径（正值阴影变大，负值缩小）和颜色。可选 inset 关键字表示内阴影。

内阴影和外阴影有什么区别？

外阴影绘制在元素边框之外，用于卡片浮起、层次感；内阴影（加 inset 关键字）绘制在元素内部，用于凹陷、按下、浮雕等效果。

模糊半径为 0 是什么效果？

模糊半径为 0 时阴影是锐利的硬边，看起来像元素的一个偏移副本，常用于制作描边、切边或像素风效果。

生成的阴影代码兼容哪些浏览器？

box-shadow 是 CSS3 标准属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）都原生支持，无需厂商前缀，可直接使用。