如何生成 CSS 文本阴影代码

填写水平偏移、垂直偏移、模糊值和颜色后，即可生成一条 CSS text-shadow 声明；留空的项目会采用预设值。输出中的三个数值带有 px 单位，并以分号结尾。

先认识输入与输出

CSS 文本阴影通常需要同时设置水平偏移、垂直偏移、模糊值和颜色。这个工具可以把这些输入整理成一条 text-shadow CSS 声明，适合在编写标题、按钮或其他文字样式时快速准备基础代码。三个位置使用数字，颜色位置使用文本；如果暂时没有填写某些内容，生成结果会采用对应的默认值。这样既可以先查看一条可用的声明，也可以在明确设计方向后再调整各项参数。

按顺序生成声明

1. 打开 CSS 文本阴影生成工具，找到水平偏移、垂直偏移、模糊值和颜色这四类输入控件。
2. 在前面三个控件中分别填写数字。水平偏移控制阴影的横向位置，垂直偏移控制纵向位置，模糊值则对应声明中的模糊数值；这些位置不需要自行添加 px。
3. 在颜色控件中填写颜色文本，例如 #00000033。如果希望阴影不产生水平或垂直位移，可以把相应偏移设为 0；如果希望不使用模糊，也可以把模糊值设为 0。
4. 不想指定某个参数时，可以将它留空，让工具使用预设值。未填写时，水平偏移为 1，垂直偏移为 1，模糊值为 2，颜色为 #00000033。
5. 执行生成操作并查看声明内容，确认四项信息的顺序和数值后，再将结果用于目标文字样式。需要修改效果时，只调整对应输入并重新生成，不必手动拼接单位或结尾符号。

检查生成的 CSS

生成结果是一条 text-shadow 声明，内容依次对应水平偏移、垂直偏移、模糊值和颜色。三个数字会带有 px 单位，声明末尾会有分号，因此可以重点检查数值顺序、颜色文本以及单位是否符合当前设计需要。输入 0 并不等同于省略：它会明确表示相应的偏移或模糊值为零，而留空则会触发该项默认值。

例如，输入水平偏移 4、垂直偏移 6、模糊值 3，颜色填写 #00000033，输出会呈现为 text-shadow: 4px 6px 3px #00000033; 这一格式。若只填写部分参数，阅读结果时应把未填写的位置与默认值区分开来，避免把自动采用的数值误认为手动输入。

使用示例

为一个标题设置水平偏移 4、垂直偏移 6、模糊值 3，并使用颜色文本 #00000033。

为标题设置阴影时，在水平偏移、垂直偏移和模糊值中分别输入 4、6、3，在颜色位置填写 #00000033，然后执行生成操作并查看声明。

结果应呈现为 text-shadow: 4px 6px 3px #00000033; 这一类声明，三个数值带有 px 单位，末尾带分号。

使用限制

• 工具输出的范围是单条 CSS 文本阴影声明，其他样式规则需要在使用位置自行安排。

常见错误

• 把 4px 直接填入数字控件会混淆输入值与输出格式；请在偏移和模糊控件中填写纯数字，让生成结果自动写入 px，颜色则放在颜色文本控件中。

常见问题

哪些 CSS 文本阴影参数可以自定义？

水平偏移、垂直偏移和模糊值可填写数字，颜色位置可填写文本，因此可以分别调整阴影位置、柔和程度和颜色。

偏移值或模糊值能设为 0 吗？

可以，将水平偏移、垂直偏移或模糊值设为 0 时，工具仍可成功生成声明。

留空后会使用哪些默认值？

在相应项目留空时，水平偏移采用 1，垂直偏移采用 1，模糊值采用 2，颜色采用 #00000033。