UD5工具箱
CSS 文字装饰核心术语
以下是与本编辑器密切相关的 CSS 术语。理解这些概念有助于您更准确地使用工具，并将生成的代码应用到实际项目中。
text-decoration-line
定义装饰线条的类型。可选值包括 underline（下划线，在文字下方添加线条）、overline（上划线，在文字上方添加线条）和 line-through（删除线，在文字中间穿过线条）。多个值可以用空格分隔，例如 underline line-through 可同时显示下划线和删除线。本编辑器的「装饰类型」区域对应此属性。该属性是 text-decoration 属性族中最基础的子属性，决定了装饰线条的位置和数量。
text-decoration-style
定义装饰线条的绘制样式。可选值包括 solid（实线，默认值）、double（双线，两条平行实线）、dotted（点线，由圆点组成）、dashed（虚线，由短横线组成）和 wavy（波浪线，由连续波形组成）。不同样式传达不同的视觉语气：实线正式、波浪线活泼、虚线轻盈。本编辑器的「线条样式」区域对应此属性。该属性仅接受单个值，不支持多值组合。
text-decoration-color
定义装饰线条的颜色。支持所有 CSS 颜色格式，包括十六进制（#ff0000）、RGB（rgb(255,0,0)）、HSL（hsl(0,100%,50%)）和命名颜色（red）。与文字颜色（color 属性）相互独立，可以设置为不同颜色以创造双色效果。例如文字为黑色、装饰线为红色的组合在错误提示中非常常见。本编辑器的「线条颜色」选择器对应此属性，支持直观的色盘选色和精确的数值输入。
text-decoration-thickness
定义装饰线条的粗细。支持长度值（如 1px、2px、0.5rem）、百分比、关键字 auto（自动，通常约为 1px）和 from-font（根据字体的度量信息决定）。较粗的线条视觉冲击力强，适合标题装饰；较细的线条更精致，适合正文。本编辑器提供 1px 到 10px 的连续调节范围，用户可以通过滑块或数值输入框精确控制。该属性属于 CSS Text Decoration Module Level 4 规范。
text-underline-offset
定义下划线与文字基线之间的垂直偏移距离。正值使下划线向下移动（远离文字），负值使其向上移动（贴近甚至穿过文字）。该属性仅对 underline 类型生效，对 overline 和 line-through 无效。合理设置偏移可以避免下划线与字母下行部分重叠，是提升可读性的重要参数。默认值为 auto，浏览器通常渲染为 1px 到 3px 之间。本编辑器的偏移滑块支持正负值调节。
text-decoration-skip-ink
控制下划线是否在遇到字符的下行部分（descender，如 g、j、p、q、y 的尾部）时自动断开。默认值为 auto，下划线会在下行字符处跳过，保持文字清晰可读。设置为 none 时下划线会连续穿过所有字符，视觉上更连贯但可能与下行字符重叠。该属性在所有现代浏览器中均支持，对于正文阅读场景建议保持默认值，对于标题或装饰性文字可以尝试设为 none。
text-decoration 属性（简写）
text-decoration 是 text-decoration-line、text-decoration-style、text-decoration-color 和 text-decoration-thickness 的简写属性。语法为 text-decoration: line style color thickness，例如 text-decoration: underline wavy #4f46e5 2px。使用简写属性可以减少代码量，但无法单独控制 offset 等非简写子属性。本编辑器在生成代码时会优先使用独立属性以便于阅读和维护，同时也会生成简写版本供参考。
border-bottom 模拟下划线
一种常见的替代方案，使用 border-bottom: 1px solid red 为元素添加底部边框来模拟下划线效果。与 text-decoration 的区别在于：border-bottom 会影响盒模型（占据空间）、只在元素底部显示一条线（多行文本中只有最后一行有线）、不支持 wavy 等样式。但在需要精确控制线条与文字间距（通过 padding）或需要独立于文字装饰的边框效果时，border-bottom 仍有其用武之地。两种方案各有优劣，应根据实际场景选择。