text-decoration-line 无效多因浏览器不支持或被 text-decoration 简写覆盖；二者不可混用，需统一用 Level 3 或 Level 4 属性体系；局部下划线需注意继承与行框绘制特性。
text-decoration-line 为什么加了没效果
多数情况是被其他样式覆盖了，或者写在了不支持的元素上。text-decoration-line 是 CSS Text Decoration Level 4 的新属性，老浏览器（比如 Chrome 98 之前、Firefox 70 之前）根本不认它；更常见的是，你写了 text-decoration-line: underline，但父级或自身同时有 text-decoration: none 或 text-decoration: underline solid #000 —— 后者是 Level 3 的简写，会把 Level 4 的独立声明整个吃掉。
实操建议：
- 优先用兼容性更好的
text-decoration: underline，除非你明确需要分离线型、颜色、位置 - 检查 computed styles，看
text-decoration最终值是不是空或none - 避免在
、等原生带下划线/装饰逻辑的元素上直接覆盖，先重置：text-decoration: none再设新值
text-decoration-line 和 text-decoration 的区别在哪
text-decoration-line 只管“画哪条线”（underline / overline / line-through / blink），而 text-decoration 是 Level 3 的复合简写，一次定线条、颜色、样式、位置。两者不能混用：只要用了 text-decoration，哪怕只写一个值，也会清空 text-decoration-line 的单独设置。
实操建议：
- 想精细控制就全用 Level 4 属性：
text-decoration-line+text-decoration-color+text-decoration-style+text-decoration-thickness+text-underline-offset - 想省事且兼容优先，就只用
text-decoration: underline wavy red这类 Level 3 写法 -
text-decoration-thickness: 2px和text-underline-offset: 4px在 Chrome/Firefox 新版本里才稳定，Safari 目前对offset支持弱
给部分文字加下划线，inline 元素怎么处理
直接对 或 设 text-decoration-line 没问题，但要注意继承和盒模型干扰。比如父容器设了 text-decoration: underline，子元素即使写了 text-decoration-line: none 也无效——因为装饰是“绘制在行框上”的，不是逐元素渲染的。
实操建议：
- 用
text-decoration: underline配合text-decoration-skip-ink: auto（跳过字体笔画，更干净） - 要局部取消下划线，得用
text-decoration: none覆盖整行，再对目标文字单独加回，而不是靠line属性开关 - 如果下划线要避开图标或 emoji，加
text-decoration-skip-ink: auto，但注意 Safari 旧版不支持
下划线太贴字或太粗，怎么调位置和粗细
默认下划线位置和粗细由字体决定，没法直接改。Level 4 提供了两个关键属性：text-underline-offset 控制离文字 baseline 的距离，text-decoration-thickness 控制线宽。但它们不是所有浏览器都支持，而且值设得太大会让线“飘”出文本块范围。
实操建议：
- 偏移量推荐用
text-underline-offset: 0.1em或2px，比默认高一点更清晰 - 厚度慎用像素值：
text-decoration-thickness: 1px在高 DPI 屏幕可能糊，优先用from-font或auto - 如果 offset 不生效，大概率是浏览器不支持，降级到
border-bottom: 1px solid currentColor+padding-bottom: 1px模拟
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
