CSS 文字阴影生成器

完整语法为 text-shadow: <offset-x> <offset-y> <blur-radius>? <color>。 其中 offset-x 与 offset-y 必填，控制阴影的水平和垂直位移； blur-radius 可选，控制阴影模糊程度（值为 0 时阴影锐利）；color 为阴影颜色。 多层阴影用逗号分隔，从前到后依次叠加。与 box-shadow 不同，text-shadow 没有 spread-radius（扩散半径）和 inset（内阴影）参数。

作用对象不同：text-shadow 只作用于文字本身，阴影跟随文字轮廓； box-shadow 作用于元素的整个盒模型，阴影跟随元素边界框。
参数差异：text-shadow 只有 x、y、blur、color 四个参数； box-shadow 额外支持 spread-radius（扩散）和 inset（内阴影）。
性能差异：大量文字使用 text-shadow 时，尤其是大模糊半径， 可能比 box-shadow 更消耗 GPU 性能，因为阴影需要跟随每个字符的轮廓渲染。

霓虹灯效果的核心是多层零偏移阴影叠加：每一层都有较大的模糊半径但不同透明度，模拟光晕由内向外渐弱。 典型配方：text-shadow: 0 0 10px rgba(0,200,255,0.8), 0 0 20px rgba(0,200,255,0.5), 0 0 40px rgba(0,150,255,0.3);。 关键点：① x/y 偏移为 0，阴影居中；② 模糊半径递增（10→20→40），模拟光晕扩散； ③ 透明度递减（0.8→0.5→0.3），模拟光晕渐弱；④ 文字颜色与阴影色一致或为白色，增强发光感。

3D 效果通过多层零模糊阴影逐像素偏移实现，模拟文字的"厚度"。 典型配方：text-shadow: 1px 1px 0 #c0c0c0, 2px 2px 0 #b0b0b0, 3px 3px 0 #a0a0a0, 4px 4px 0 #909090, 5px 5px 0 #808080;。 关键点：① 模糊半径为 0，每层都是锐利投影；② x/y 偏移逐层递增（1→2→3→4→5）， 模拟厚度方向；③ 颜色从浅到深渐变，模拟受光面到背光面的过渡。层数越多，3D 厚度越明显，一般 4-6 层即可。

CSS 没有原生的 text-stroke 属性（-webkit-text-stroke 兼容性有限）， 常用 text-shadow 的 8 方向零偏移阴影模拟描边。需要 8 层阴影分别向 8 个方向（上、下、左、右、 左上、右上、左下、右下）偏移 1px，颜色为描边色。典型配方： text-shadow: -1px 0 #333, 1px 0 #333, 0 -1px #333, 0 1px #333, -1px -1px #333, 1px 1px #333, -1px 1px #333, 1px -1px #333;。 本工具的"描边"预设已内置此效果。

多层阴影用逗号分隔，浏览器从前到后依次绘制，第一层在最上层（离文字最近）， 最后一层在最底层。这意味着：对于 3D 效果，浅色阴影（近处）在前，深色阴影（远处）在后， 才能模拟正确的光照层次。对于霓虹效果，小模糊大透明度（内层光晕）在前，大模糊小透明度（外层光晕） 在后，才能模拟光晕由内向外渐弱。本工具支持拖动层顺序调整（通过删除后重新添加实现）。

text-shadow 是 CSS2.1 的成熟特性（CSS3 重新纳入），所有现代浏览器（Chrome、Firefox、 Safari、Edge）全面支持，IE10+ 也已支持（IE9 及以下不支持）。多层阴影、负偏移、大模糊半径等特性 在所有支持的浏览器中均可用。移动端 iOS Safari 与 Android Chrome 完全支持。 无需添加浏览器前缀，可直接用于生产环境。

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