UD5工具箱
常见问题
CSS text-shadow 语法是什么？
基本语法为text-shadow: offset-x offset-y blur-radius color。offset-x和offset-y必填，控制阴影位置。blur-radius可选，默认为0。color支持hex、rgb、rgba、hsla等格式。多层阴影用逗号分隔，如text-shadow: 3px 3px 6px rgba(0,0,0,0.3), 0 0 10px rgba(0,153,255,0.5)。注意参数之间用空格分隔，不能用逗号。
如何创建霓虹发光文字效果？
霓虹发光效果的关键步骤：使用深色背景（如#1a1a2e或纯黑）；文字颜色使用亮色（白色或浅色）；阴影偏移设为0（0 0），这样阴影在文字正后方均匀扩散；设置较大的模糊半径（15-30px）；使用鲜艳的阴影颜色（如#0099ff、#ff3399）；叠加多层阴影增强发光强度，例如添加3层不同模糊半径的阴影（10px、20px、30px）。可以试试本工具的「霓虹蓝光」或「霓虹粉光」预设！
text-shadow 和 box-shadow 有什么区别？
text-shadow专门用于给文字添加阴影，语法更简洁：offset-x offset-y blur color，不支持内阴影（inset）和扩展半径（spread）。box-shadow用于给元素盒子添加阴影，语法更丰富：offset-x offset-y blur spread color inset，支持内阴影和扩展半径。简单来说：给文字加阴影用text-shadow，给容器、按钮、卡片加阴影用box-shadow。两者可以同时使用，互不影响。
文字阴影可以使用 rgba 颜色吗？
当然可以！使用rgba()或hsla()颜色格式可以控制阴影的透明度，这是创建柔和自然阴影的最佳实践。例如text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3)中0.3表示30%不透明度，阴影会显得柔和通透。本工具生成的CSS代码默认使用rgba格式，确保阴影效果自然。对于霓虹发光效果，建议使用较高的透明度（0.8-1.0）；对于经典阴影，使用中等透明度（0.3-0.6）效果最佳。
浏览器对 text-shadow 的兼容性如何？
兼容性非常好！text-shadow是CSS3的标准属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）都完美支持，包括移动端浏览器。IE10+也完全支持（IE9及以下不支持）。目前全球浏览器对该属性的支持率超过98%，可以放心使用。多重阴影（逗号分隔）同样获得广泛支持。如果需要支持IE9及以下，建议使用图片替代方案或条件注释。
文字阴影会影响网页性能吗？
一般来说影响非常小，正常使用的场景下完全不用担心。单个或少量阴影几乎不影响渲染性能；大量文字同时使用大模糊半径的阴影（如50px以上）可能略微影响滚动流畅度；多层阴影（5层以上）在低性能设备上可能有轻微影响。建议的性能优化措施：避免在动画中频繁改变text-shadow的模糊半径（这会触发重绘）；在列表页等大量文字的页面中使用较简单的阴影；移动端尽量减少阴影层数。正常使用场景下（1-3层阴影），完全可以放心使用。
如何创建3D立体文字效果？
3D立体文字效果通过多层无模糊阴影叠加实现：设置blur为0（无模糊）；创建多个阴影层，每层偏移量递增（如1px、2px、3px...）；颜色逐渐变浅或保持统一深色；层数越多立体感越强（通常3-6层）。试试本工具的「3D立体」预设，可以看到实际效果。也可以在此基础上调整偏移量和层数，创造不同的立体风格。偏移方向决定立体的光源方向，偏移向右下方模拟左上方光源。
如何在背景图片上增强文字可读性？
在背景图片上放置文字时，可以使用text-shadow增强可读性。推荐方法：为文字添加一层黑色半透明阴影（如text-shadow: 1px 1px 3px rgba(0,0,0,0.8)），偏移量设小（1-2px），模糊半径适中（3-6px）。也可以叠加一层较大模糊的阴影增强效果。如果效果仍不理想，考虑在文字下方添加半透明背景层（如半透明黑色div）。对于重要文字（如标题），建议同时使用text-shadow和背景半透明层，确保在各种背景图片上都清晰可读。