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 不占空间。对于需要精确控制位置的下划线，border-bottom 配合 padding 可能更灵活；对于语义化的文字装饰，推荐使用 text-decoration。

可以。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%，可以放心使用。

可以。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 获得更统一的线条效果。该属性在所有现代浏览器中均支持。