CSS 文字装饰在线编辑器 - 下划线/删除线/波浪线样式定制

CSS 文字装饰由多个子属性组成：text-decoration-line（定义线条类型：underline 下划线、overline 上划线、line-through 删除线）、text-decoration-style（线条样式：solid 实线、double 双线、dotted 点线、dashed 虚线、wavy 波浪线）、text-decoration-color（线条颜色）、text-decoration-thickness（线条粗细）。此外还有 text-underline-offset 控制下划线偏移距离，以及 text-underline-position 控制下划线位置。这些属性可以组合使用，实现丰富的文字装饰效果。本编辑器涵盖了以上所有属性的可视化控制。

使用以下 CSS 代码即可实现波浪线下划线：text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: #4f46e5; text-decoration-thickness: 2px; text-underline-offset: 5px; 也可以使用简写形式：text-decoration: underline wavy #4f46e5 2px; 再配合 text-underline-offset: 5px;。波浪线（wavy）在现代浏览器中广泛支持，是近年流行的设计趋势，常用于强调链接或重点内容。在本编辑器中，您只需点击「装饰类型」中的下划线按钮，再选择「波浪线」样式即可一键生成。

使用 text-decoration-color 属性设置下划线颜色（支持 hex、rgb、hsl 等所有 CSS 颜色格式），使用 text-decoration-thickness 属性设置粗细（支持 px、rem、百分比或关键字 auto / from-font）。例如：text-decoration-color: #e74c3c; text-decoration-thickness: 3px; 即可获得红色、3 像素粗的下划线。这比使用 border-bottom 模拟下划线更语义化，且不会影响元素盒模型。在本编辑器中，通过「颜色设置」区域的线条颜色选择器和「线条调整」区域的粗细滑块即可直观调整。

text-underline-offset 控制下划线与文字之间的垂直距离。正值增加距离（下划线远离文字），负值减少距离（下划线靠近文字，甚至穿过文字）。例如 text-underline-offset: 8px; 会让下划线明显远离文字，视觉更清晰；text-underline-offset: -3px; 则让下划线贴近文字底部。该属性仅对 underline 生效，对 overline 和 line-through 无效。合理设置偏移可以避免下划线与字符下行部分（如 g、j、p、q）重叠，提升可读性。本编辑器的偏移滑块支持正负值调节。

两者主要区别包括：语义化方面，text-decoration 是真正的文字装饰，屏幕阅读器可以识别；border-bottom 是边框，语义上不是文字装饰。换行处理方面，text-decoration 在多行文本中每行都会有下划线；border-bottom 只在元素底部显示一条线。精细控制方面，text-decoration 支持 wavy、dotted、dashed 等样式以及 offset 偏移；border-bottom 的样式相对有限。盒模型方面，border-bottom 占用盒模型空间，可能影响布局；text-decoration 不占空间。对于语义化的文字装饰推荐使用 text-decoration，对于需要精确位置控制的场景 border-bottom 配合 padding 可能更灵活。

可以。text-decoration-line 支持多个值，用空格分隔：text-decoration-line: underline line-through; 即可同时显示下划线和删除线。也可以三线合一：text-decoration-line: underline overline line-through;。所有激活的线条共享相同的 style、color 和 thickness 设置。如果需要不同颜色或样式的组合（如红色删除线搭配蓝色波浪下划线），则需要使用多个嵌套元素分别设置。在本编辑器中，您可以同时点击「装饰类型」中的多个按钮来预览多重装饰效果。

wavy（波浪线）样式在 Chrome 57+、Firefox 36+、Safari 12.1+、Edge 79+ 以及所有现代浏览器中都有良好支持。移动端 iOS Safari 12.2+、Android Chrome 均支持。IE 浏览器不支持 wavy 值，但 IE 已于 2022 年停止支持，当前无需顾虑。2024 年全球浏览器对 text-decoration-style: wavy 的支持率超过 96%，可以放心使用。如果需要兼容极少数老旧浏览器，可以使用 @supports 特性查询提供回退方案，例如 @supports not (text-decoration-style: wavy) { /* 回退样式 */ }。

可以。text-decoration-color 和 text-decoration-style 对删除线同样生效。例如：text-decoration-line: line-through; text-decoration-style: dashed; text-decoration-color: #e74c3c; text-decoration-thickness: 2px; 可以创建红色虚线删除线效果。不过 text-underline-offset 对删除线不生效。使用自定义删除线样式可以替代默认的删除线，在电商价格展示、文档修订等场景中更具视觉表现力。在本编辑器中，选择删除线类型后调整线条样式和颜色即可实时预览效果。

荧光笔效果有多种实现方式。简单方式：使用 background: linear-gradient(to top, #ffeb3b 40%, transparent 40%); 配合 display: inline; 模拟半透明高亮。精确方式：使用 ::selection 伪元素控制选中高亮色。装饰线方式：使用 text-decoration: underline wavy #ff6b6b 3px; text-underline-offset: 2px; 配合半透明颜色营造活泼的标记效果。现代方式：使用 text-decoration-thickness: .6em; text-underline-offset: -.35em; text-decoration-color: rgba(255,235,59,.5); 让粗下划线半透明覆盖在文字下方，完美模拟荧光笔效果。本编辑器可以帮您直观地调试这些参数的组合效果。

text-decoration-skip-ink 控制下划线是否跳过字符的下行部分（descender，如 g、j、p、q、y 的尾部）。默认值为 auto（即 skip），下划线会在遇到下行字符时自动断开，保持文字清晰可读。设置为 none 时下划线会穿过所有字符，视觉上更连贯但可能与下行字符重叠。对于正文阅读场景建议保持默认 skip；对于标题或设计性文字可以设置为 none 获得更统一的线条效果。该属性在所有现代浏览器中均支持，通常无需手动设置，除非有特殊的视觉设计需求。