text-decoration-thickness必须配合text-decoration-line才能生效，单独设置无效；推荐使用0.08em单位以适配响应式，firefox不支持该属性且@supports检测不可靠，建议用伪元素方案兼容。
text-decoration-thickness 必须配合 text-decoration-line 才生效
单独写 text-decoration-thickness: 2px 不会显示任何下划线——它只是“粗细”，不是“开关”。必须先用 text-decoration-line: underline（或 line-through、overline）声明要画哪条线，否则浏览器压根不渲染装饰线。
常见错误是只设粗细，忘了开线；或者误以为 text-decoration: underline 已隐含全部能力，其实它默认只启用最基础样式，子属性需显式设置或用简写补全。
- 正确写法一（分步）：
text-decoration-line: underline; text-decoration-thickness: 2px; - 正确写法二（简写）：
text-decoration: underline solid currentColor 2px;（注意顺序：line style color thickness） - 错误写法：
text-decoration-thickness: 2px;—— 没 line，没效果
单位选 em 还是 px？优先用 0.08em 而非 1px
em 值随 font-size 缩放，更适合响应式场景；px 固定，小字号下可能太粗、大字号下又太细。实测 0.08em 是较稳妥的起始值，接近多数字体在 16px 下的默认下划线视觉粗细。
慎用 ex 单位——它依赖字体 x-height，不同字体差异极大（比如 Inter 和 Times New Roman 的 ex 值能差一倍），且 Safari 对 ex 支持不稳定。
- 推荐：
text-decoration-thickness: 0.08em; - 可用但需测试：
text-decoration-thickness: 2px;（适合固定字号布局） - 避免：
text-decoration-thickness: 0.5ex;（兼容性差 + 不可控）
Firefox 不支持 text-decoration-thickness，且 @supports 检测不准
截至 2026 年 5 月，Firefox 仍不支持 text-decoration-thickness（官方状态为 “Not planned”）。更麻烦的是，@supports (text-decoration-thickness: 1px) 在部分旧版 Chrome/Edge 中会返回 true，但实际不渲染——因为它们识别属性名却不实现功能。
这意味着不能靠 @supports 安全降级，也不能指望渐进增强自动兜底。
- 务实方案：用伪元素重写下划线（
::after+border-bottom），完全可控且兼容 IE11+ - 若坚持用原生属性，至少加一层 fallback 颜色和样式：
text-decoration: underline; text-decoration-color: #0066cc; text-decoration-thickness: 0.08em;—— Firefox 至少保留基础下划线 - 别写
@supports (text-decoration-thickness: auto)做条件加载，它在 Safari 15.6 上也返回 true 但无效
和 text-underline-offset 混用时，单位必须统一
text-underline-offset 控制下划线离文字基线的距离，常和 text-decoration-thickness 配合调整视觉平衡。但二者单位不一致会导致错位：比如 thickness: 1px + offset: 0.1em，当字体缩放时，下划线会“漂移”或贴到文字上。
解决办法是全部用相对单位，或全部用绝对单位。
- 安全组合一（全相对）：
text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; - 安全组合二（全绝对）：
text-decoration-thickness: 1.5px; text-underline-offset: 2px; - 危险组合：
text-decoration-thickness: 1px; text-underline-offset: 0.1em;—— 尤其在 rem 布局中易出问题
真正难的不是写对那行 CSS，而是判断什么时候该放弃原生属性——比如项目要支持 Firefox 或需要波浪线+粗细+偏移三者联动时，伪元素方案反而更省调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
