text-decoration-thickness 是 css 属性，非 html 属性，需配合 text-decoration（如 underline）使用，支持长度、百分比、auto 和 from-font 值，不支持 thin/medium/thick；须与 text-underline-offset 协同调整位置，简写中顺序为 line color style thickness，且不支持 from-font 和百分比。
text-decoration-thickness 不是 HTML 属性，必须用 CSS 控制
HTML 标签本身没有 text-decoration-thickness 这个属性，所有装饰线粗细控制都得靠 CSS。直接写在 style 里或外部样式表中才生效。常见错误是试图在 HTML 的 class 或 id 上“配置”这个值，结果完全没反应。
必须先有基础装饰线（比如 text-decoration: underline），text-decoration-thickness 才有作用对象。单独设它不触发任何视觉变化。
- ✅ 正确顺序：
text-decoration: underline;+text-decoration-thickness: 1.5px; - ❌ 错误写法：
text-decoration-thickness: 2px;单独存在（无装饰线类型） - ⚠️ 注意：IE 和 Safari ≤ 15.6 完全不支持，Safari 16+、Chrome 95+、Firefox 89+ 才可用
支持哪些值？别乱用 thin/medium
text-decoration-thickness 的合法值只有三类：长度单位（px、em、rem）、百分比（相对于字体大小）、关键字 auto 和 from-font。它**不接受** thin、medium、thick —— 那些是旧版 border-width 的值，用在这里会直接被忽略。
-
text-decoration-thickness: 1px;—— 最常用，稳定可控 -
text-decoration-thickness: 0.08em;—— 推荐用于响应式场景，随font-size缩放 -
text-decoration-thickness: 80%;—— 相当于 0.8 × 当前字体大小，适合标题类大字 -
text-decoration-thickness: from-font;—— 依赖字体文件内嵌的 hint，多数 Web 字体不带，实际效果常退化为auto
和 text-underline-offset 配合时，粗细值会影响视觉位置
粗细变大后，下划线的“视觉重心”会下移，尤其在小字号下更明显。如果只调 text-decoration-thickness 而不调 text-underline-offset，容易让线贴着文字底部甚至“钻进”字形里。
- 默认
text-underline-offset是浏览器自动计算的，不可靠 - 设
text-decoration-thickness: 2px;时，建议同步设text-underline-offset: 4px;（约等于粗细的 2 倍） - 避免用负值（如
-1px），Firefox 和部分 Safari 版本渲染异常，线可能消失或错位 - 中英文混排时，优先用
em单位（如text-underline-offset: 0.15em;），比像素更稳
简写写法里，粗细必须放在颜色之后、样式之前
用 text-decoration 简写时，顺序不能错：text-decoration: <line><color> <>style> <thickness></thickness></color></line>。粗细值必须紧挨在样式值后面，否则会被浏览器跳过。
/* ✅ 正确：underline → red → solid → 1.2px */ text-decoration: underline red solid 1.2px; <p>/<em> ❌ 错误：把 1.2px 放在 red 前，red 会被当成 thickness，整个声明失效 </em>/ text-decoration: underline 1.2px red solid;</p>
简写不支持 from-font 和百分比值，想用这些必须拆成独立属性写。另外，text-decoration 简写会重置所有子属性（包括 text-underline-offset），所以哪怕只改粗细，也得把偏移量一并带上，否则回归浏览器默认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
