text-decoration 不支持渐变下划线，必须用 background-image 或 ::after 伪元素模拟；前者兼容 IE10+、性能优但仅适用于单行文本，后者适合多词导航与动画，但需 relative 定位；多行文字必须分段处理，否则下划线错位。
text-decoration 不能直接支持渐变下划线，浏览器会忽略 linear-gradient() 写在 text-decoration-color 或 text-decoration-line 里的任何尝试。必须用视觉模拟方案，核心就两条路：background-image 或 ::after 伪元素。
为什么 background-image 是最稳妥的单行方案
它不依赖 DOM 结构、不增加额外标签、兼容性覆盖到 IE10+，且性能开销极低。但只适合文字不换行的场景（如导航链接、按钮文案、标题）。
-
background-image: linear-gradient(to right, #ff6b6b, #4ecdc4)—— 渐变方向必须是水平（to right或90deg），否则无法精准压成一条线 -
background-size: 100% 1px—— 高度必须严格设为1px，设成100% 2px就会变成色块 -
background-position: bottom 2px—— 偏移量要根据字体下沉量调整，2px是常见值，但Roboto可能要1.8px，Georgia可能要2.4px -
background-repeat: no-repeat—— 必须显式声明，否则默认重复，整行全是短线 - 容器需预留空间：
padding-bottom: 2px，否则下划线会被父容器裁掉
::after 伪元素更适合导航菜单和精确对齐
当需要下划线严格贴合每个字宽度（比如多单词导航项）、或要加 hover 动画时，::after 更可控。但它要求文字容器是 inline 或 inline-block，且必须设 position: relative。
-
content: ""和display: block不可省略，否则伪元素不渲染 -
position: absolute; bottom: 0; left: 0; width: 100%; height: 1px—— 宽高必须明确，不能靠height: 100%推算 - 渐变写在
background: linear-gradient(...)上，不是background-image - 动画需作用于
transform: scaleX()或width，避免重绘；scaleX(0) → scaleX(1)比width: 0 → width: 100%性能更好
多行文字下划线必须分段处理
无论是 background-image 还是 ::after，原生都不支持跨行连续下划线。强行用 box-decoration-break: clone 在 Firefox 和 Safari 里行为不一致，Chrome 则完全不支持该属性用于下划线。
立即学习“前端免费学习笔记（深入）”；
- 最可靠做法：把每行文字包进单独的
<span></span>，再给每个span单独加渐变下划线 - 如果内容由 CMS 输出且不可改 HTML 结构，可用 JS 按
offsetHeight或getClientRects()拆分行，动态插入span -
background-image方案中若未分段，下划线会从第一行底端一直拉到最后一行底端，形成一根长斜线，不是预期效果
容易被忽略的兼容性细节
渐变下划线在旧版 Safari（background-image 的 background-position 对 bottom 支持不稳定，bottom 2px 可能失效。
- 降级方案：用
background-position: 100% calc(100% - 2px)替代bottom 2px - 伪元素方案中，
bottom: 0在 Safari 13.1 下可能偏高，需加transform: translateY(1px)微调 - 所有方案都应配
text-underline-offset: 2px（现代浏览器），防止原生text-decoration干扰（即使你没写，某些 UA 样式会注入）
真正麻烦的不是怎么写渐变，而是怎么让它在不同字体、不同行高、不同缩放比例下始终对齐。动手前先测三组字体：系统默认、衬线体、无衬线体，再看一遍移动端横屏——很多“完美 demo”塌在这一步。
