text-decoration-line 是 css level 3 中用于指定装饰线类型（如 underline、line-through）的属性，但不能单独生效，必须与 text-decoration 复合属性配合使用，否则被浏览器忽略。
text-decoration-line 是什么，为什么不能直接用
text-decoration-line 是 CSS Level 3 中定义的属性，用于精确控制装饰线类型（如 underline、line-through、overline），但它**不能单独生效**——必须和 text-decoration-color、text-decoration-style 等一起被 text-decoration 这个复合属性“托管”。浏览器会忽略孤立设置的 text-decoration-line，这是最常踩的坑。
常见错误现象：
写了 text-decoration-line: underline; 却没下划线，检查 computed styles 会发现该声明根本没被应用。
- 必须搭配
text-decoration使用，或至少同时设置text-decoration-color（哪怕只是默认值currentcolor） - 旧版浏览器（如 IE、早期 Safari）完全不支持
text-decoration-line，需用传统text-decoration: underline回退 - 它不继承，子元素不会自动获得父级设置的 line 类型，需显式声明
正确写法：用 text-decoration 复合属性一次性声明
现代推荐写法是直接用 text-decoration，它能同时指定线型、颜色、样式、厚度和位置：
.link {
text-decoration: underline solid #0066cc;
}
.striked {
text-decoration: line-through wavy #ff6b6b;
}
上面两行等价于分别设置了 text-decoration-line、text-decoration-style 和 text-decoration-color。注意：text-decoration 的语法顺序固定：line → style → color → thickness → position（后两者为 Level 4，兼容性更差）。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 只想要下划线？写
text-decoration: underline;就够了，浏览器自动补全其余默认值 - 想加删除线+波浪线？必须写全
line-through wavy，只写wavy不生效 - Chrome/Edge 110+ 支持
text-decoration-thickness: 2px独立控制粗细，但 Safari 目前仍需塞进text-decoration复合值里
需要分别控制 line 和 style？用 shorthand + override
如果逻辑上必须先设通用样式再覆盖某一项（比如全局下划线，局部改成波浪删除线），可以这样操作：
a {
text-decoration: underline;
}
a.deprecated {
text-decoration: line-through wavy;
}
这里没有“分别设置”，而是用新复合值完全覆盖旧值。CSS 不支持“只改 line 不动 style”，所以不存在 text-decoration-line: line-through 单独起效的场景。
- 不要试图用
text-decoration-line: line-through覆盖text-decoration: underline—— 它会被忽略 - 若需 JS 动态切换，建议用 class 切换，而不是操作
style.textDecorationLine（无效） - 使用
text-decoration-skip-ink: auto可避免下划线切断文字笔画，尤其对小写字母 g/j/y 很有用
兼容性与降级策略
在真实项目中，text-decoration-line 几乎不用单独出现；真正要关心的是 text-decoration 的兼容范围：
-
text-decoration: underline/line-through：所有浏览器支持，放心用 -
text-decoration: wavy或dotted：Chrome 69+、Firefox 70+、Safari 12.1+，旧版本会回退到solid - 若需支持 IE，只能用
text-decoration: underline或line-through，且避免任何额外值 - 用 Autoprefixer 无法补全
text-decoration-line，因为它不是前缀属性，而是被设计为必须配合复合属性使用
真正容易被忽略的点：复合属性 text-decoration 会重置所有子属性，包括你可能没意识到的 text-decoration-color（默认是 currentcolor）。如果父元素设了红色下划线，子元素只写 text-decoration: line-through，那删除线也会是红色——这不是 bug，是规范行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
