如何生成 CSS box-shadow 代码

填写偏移、模糊、扩散和颜色，按需要开启 inset，再计算当前设置，就能得到 CSS box-shadow 声明。工具也提供默认参数，适合先生成结果再逐项调整。

先认识阴影设置

这个工具适合在编写网页样式时整理阴影声明。它把水平偏移、垂直偏移、模糊、扩散和颜色集中在同一组设置中，并提供内阴影选项，因此你可以先按视觉目标填写参数，再查看对应的 CSS box-shadow 声明。若只是想快速得到一组可继续调整的阴影参数，也可以先使用预设值，再根据页面效果修改输入。

按设置生成声明

1. 打开工具后，先查看水平偏移、垂直偏移、模糊、扩散、颜色以及 inset 选项。前四项是可选的数值输入，颜色是文本输入，内阴影则通过复选框控制。
2. 按需要填写四个数值。若暂时不调整，默认值依次为 2、2、5 和 0；颜色的默认值为 #00000033。
3. 如果目标是让阴影出现在元素内部，启用 inset；制作元素外部的阴影时，保持该选项关闭。
4. 提交或计算当前设置，查看工具返回的 CSS 声明。生成内容会使用你提供的偏移、模糊、扩散和颜色，并为四个数值添加 px。
5. 将得到的声明放入相应的样式规则中，再结合页面呈现调整参数。修改后重新计算，便于比较不同设置产生的声明差异。

检查结果的组成

生成结果的核心是 box-shadow 声明，其中四个数值按水平偏移、垂直偏移、模糊和扩散的顺序排列，颜色也会保留在声明中。数值后出现 px 是该工具声明格式的一部分，而不是需要手动补写的内容。开启 inset 时，结果还会加入 inset，这表示当前设置用于表达内阴影；关闭该选项时，声明不会加入这个标记。

在已确认的计算情形中，水平偏移、垂直偏移、模糊和扩散都可以填写 0，并能成功返回结果。这种设置可用于检查没有位移、模糊或扩散的声明形态。工具负责生成声明文本，阴影在具体页面中的视觉表现仍应结合元素尺寸、背景和其他样式自行查看。

使用示例

你正在制作一个边缘清晰且不发生位移的阴影效果，因此把四个数值输入都设为 0，然后查看返回的声明。

制作一个不产生位移、模糊或扩散的阴影时，将水平偏移、垂直偏移、模糊和扩散都填为 0，保留颜色设置后执行计算。

结果应是一条 CSS box-shadow 声明，含有四个带 px 的数值和颜色；若同时开启 inset，声明中还应出现 inset。

使用限制

• 已确认的信息只覆盖列出的输入项目和声明格式，数值范围、颜色写法及其他输入规则未在这里说明，请以工具实际接受的内容为准。

常见错误

• 如果需要内阴影却只改了数值，结果中可能没有对应的 inset 标记；请打开 inset 选项后再次计算，并检查生成声明是否包含该标记。

常见问题

可以自定义 CSS 阴影的参数吗？

可以。四个阴影数值都是可选输入，默认顺序为水平偏移 2、垂直偏移 2、模糊 5 和扩散 0，颜色也能通过文本输入调整。

怎样生成内阴影？

需要内阴影时，请开启 inset 选项；生成的声明会加入 inset，从而反映这项设置。

偏移、模糊和扩散能否设为 0？

在已确认的计算情形中可以这样设置：两个偏移、模糊和扩散都填写 0，随后计算并查看成功返回的声明。