用 background-image 实现渐变下划线需设 linear-gradient 高度为 1px，配合 background-size: 100% 1px、background-position: bottom center 及足够 padding-bottom 防裁剪，并为 IE 提供 text-decoration 降级。
用 background-image 替代 text-decoration 实现渐变下划线
纯 CSS 的 text-decoration: underline 不支持渐变，也不能精确定位粗细和位置。真正可行的路是把下划线当成一个独立的视觉层——用 background-image 画一条极细的线，再通过 background-position 和 background-size 把它“钉”在文字底部。
linear-gradient 要设成 1px 高，否则会糊成色块
渐变背景如果没限制高度，浏览器会按容器默认高度（比如行高）铺满，下划线就变粗了、失真了。必须用 background-size 把渐变“压扁”到刚好 1px 高，再用 background-position 拉到底部。
background-image: linear-gradient(to right, #ff6b6b, #4ecdc4)-
background-size: 100% 1px—— 宽度铺满，高度压成 1px -
background-repeat: no-repeat—— 防止横向重复出多条线 -
background-position: bottom center / 100% 1px—— 更简洁写法，等价于上面两行
文字要有 padding-bottom，否则渐变线会被裁掉
这是最常踩的坑：直接给文字加 background，但没留空间，background-position: bottom 会卡在内容盒底部，而文字字形本身可能已经贴底，结果线被截断或完全看不见。
- 至少加
padding-bottom: 4px（具体值看字体和设计需求） - 不能只靠
line-height或margin补偿，它们不扩大背景绘制区域 - 如果用了
box-sizing: border-box，记得把padding-bottom算进总高度里
兼容性与性能注意点：IE 不支持 background-position 的双值语法
老版本 IE（如 IE11）对 background-position: bottom center / 100% 1px 解析不稳定，建议拆成独立属性，并补上 fallback 单色下划线。
立即学习“前端免费学习笔记（深入）”；
- 写法上优先用
background-position: bottom center+background-size: 100% 1px - 加一句
text-decoration: underline作为降级，颜色设为渐变中较稳的一个主色（如#4ecdc4） - 不要用
repeating-linear-gradient模拟细线——性能差，且在缩放时容易出现像素抖动
真正难的是让这条线在不同字号、不同字体下沉距离一致，得靠反复调 padding-bottom 和 background-position 的 vertical offset（比如 bottom 2px），没有通用值。
