CSS文字下划线怎么加？text-decoration-line用法

CSS文字下划线看似简单，实则暗藏兼容性陷阱与渲染逻辑玄机：`text-decoration-line`作为Level 4新属性，常因浏览器旧版本不支持或被Level 3的`text-decoration`简写粗暴覆盖而“失效”；它不可与`text-decoration`混用，精细控制需统一采用Level 4全家桶（`text-decoration-line`+`color`+`style`+`thickness`+`offset`），而兼顾兼容则应首选`text-decoration: underline`简写；更关键的是，下划线本质绘制在行框而非单个元素上，导致继承与局部控制异常棘手——想精准加、减、调位置或粗细？得懂行框机制、善用`text-decoration-skip-ink`、警惕Safari限制，并在必要时用`border-bottom`优雅降级。

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 的区别在哪