UD5工具箱
实时预览与代码生成
编辑器的核心能力在于实时预览。用户调整任何参数后，预览区域立即呈现最终视觉效果，同时下方的代码区域同步生成对应的 CSS 代码。这种所见即所得的工作方式彻底告别了传统开发中修改代码、保存、刷新浏览器的繁琐循环，让样式调试变得高效而直观。生成的代码可直接复制到项目中使用，无需二次加工，大幅节省开发时间。
六大装饰类型与线条样式
工具全面支持 CSS text-decoration-line 属性的三种基本值：underline（下划线）、line-through（删除线）和 overline（上划线）。同时通过 text-decoration-style 属性，用户可以在实线（solid）、双线（double）、点线（dotted）、虚线（dashed）和波浪线（wavy）五种线条样式之间自由切换。三乘五的组合矩阵意味着用户可以创造出十五种不同的装饰效果，满足各类设计场景的需求。
三色独立设置
本工具支持三个独立的颜色控制：线条颜色（text-decoration-color）、文字颜色（color）和背景颜色（background-color）。通过颜色选择器，用户可以为装饰线条指定与文字不同的颜色，实现双色甚至多色的视觉层次。例如，黑色文字搭配红色波浪下划线，或者白色文字搭配黄色背景高亮，这些在实际项目中极为常见的配色方案都能轻松实现。所有颜色选择器均支持 RGB 模式，精确到每个通道的数值。
线条粗细与偏移控制
text-decoration-thickness 属性控制装饰线条的粗细，本工具提供从 1px 到 10px 的连续调节范围，用户可以通过滑块或直接输入数值来精确设定。text-underline-offset 属性控制下划线与文字基线之间的垂直距离，正值使下划线下移远离文字，负值使其上移贴近文字。这两个高级参数的组合使用可以创造出极为细腻的装饰效果，例如纤细的高偏移波浪线或粗壮的低偏移实线。需要注意的是偏移属性仅对下划线（underline）生效。
八种预设模板
为了帮助用户快速上手，工具内置了 8 种精心设计的预设模板：波浪线强调、双线下划线、删除线标记、虚线高亮、粗体下划线、点状装饰、上划标注和组合装饰。每个模板都预设了合理的装饰类型、线条样式、颜色搭配和粗细参数，用户可以一键应用后根据需要微调。预设模板特别适合不熟悉 text-decoration 属性的初学者，也能为有经验的开发者提供灵感参考。
字体大小与预览文字自定义
不同字号下，文字装饰的视觉表现差异显著。小字号时线条可能显得拥挤，大字号时偏移效果更加明显。本工具允许用户自由调整预览文字的字体大小，从 12px 到 72px 连续可调，方便检验装饰样式在各种尺寸下的表现。同时用户可以输入自定义的预览文字，将实际项目中的文案放入预览区，确保最终效果与预期完全一致。工具还提供随机文字生成功能，用于测试装饰效果在不同字符组合下的表现。
一键复制与语义化输出
编辑器生成的 CSS 代码采用标准的 text-decoration 属性族写法，符合 W3C 规范，具有良好的语义化和可读性。代码按属性分行组织，方便开发者理解每个属性的作用。一键复制功能将完整的 CSS 代码块放入剪贴板，开发者可以直接粘贴到样式表中使用。相比使用 border-bottom 模拟下划线的方案，本工具生成的代码在语义化、多行文本处理、盒模型影响等方面都具有天然优势，是更符合现代前端最佳实践的选择。