UD5工具箱
快速上手：六步生成您的文字装饰 CSS 代码
本教程将引导您完成从打开工具到复制代码的完整流程。整个过程无需注册登录，无需安装任何软件，打开浏览器即可使用。
第一步：选择装饰类型
在编辑器左侧的「装饰类型」区域，您会看到三个按钮：下划线（underline）、删除线（line-through）和上划线（overline）。点击对应的按钮即可激活相应的装饰线条。您可以同时激活多个类型，例如同时选中下划线和删除线，预览区会立即显示双重装饰效果。被选中的按钮会呈现高亮状态，方便您确认当前的选择。建议从最常用的下划线开始尝试。
第二步：设定线条样式
在「线条样式」区域，您可以在五种样式之间选择：实线（solid）、双线（double）、点线（dotted）、虚线（dashed）和波浪线（wavy）。每种样式都会立即在预览区呈现效果。实线是最常见的选择，适合正式场景；波浪线更具活泼感，常用于链接强调；双线则具有较强的视觉冲击力，适合标题装饰。选择后预览区和代码区域会同步更新。
第三步：配置颜色方案
「颜色设置」区域提供了三个颜色选择器。线条颜色控制装饰线条本身的色彩；文字颜色控制预览文字的颜色；背景颜色控制预览区域的背景色。建议尝试不同的颜色组合来获得最佳视觉效果。例如，深色文字搭配亮色装饰线条可以创造醒目的强调效果，而浅色背景上的彩色装饰则适合高亮标记场景。所有颜色选择器均支持拖拽选色和手动输入 RGB 值。
第四步：调整线条参数
在「线条调整」区域，您可以通过滑块或输入框调节两个关键参数。线条粗细（text-decoration-thickness）决定了装饰线条的视觉重量，默认值为 2px，建议在 1px 到 5px 之间选择，过粗的线条可能喧宾夺主。下划线偏移（text-underline-offset）控制线条与文字之间的距离，正值使线条下移，负值使线条上移，合理设置偏移可以避免线条与字母的下行部分（如 g、j、p）重叠，提升可读性。注意偏移参数仅在下划线激活时生效。
第五步：自定义预览内容
在「文字设置」区域，您可以调整字体大小和预览文字内容。字体大小从 12px 到 72px 可调，建议在目标字号下预览装饰效果，因为不同字号下线条粗细和偏移的相对比例会发生变化。您可以直接在输入框中输入自定义的预览文字，例如您项目中的实际文案，以确保装饰效果符合预期。点击「随机生成」按钮可以快速获得填充文字用于测试。点击「重置默认」可将所有参数恢复到初始状态。
第六步：使用预设模板（可选）
如果您不想从零开始配置，可以使用「预设模板」区域的 8 种一键模板。每种模板都预设了合理的参数组合，点击即可应用。例如「波浪线强调」模板会自动设置蓝色波浪下划线，适合链接装饰；「删除线标记」模板设置红色虚线删除线，适合划掉旧价格。应用模板后您仍然可以自由调整任何参数，模板只是提供一个良好的起点。调整满意后，点击代码区域的「复制代码」按钮即可将 CSS 代码复制到剪贴板。