background-image + background-clip: text 不能给下划线上色，因 text-decoration 是独立装饰层，不继承文字背景；可用 border-bottom 模拟并配合 background-image + background-clip: border-box 实现渐变下划线。
background-image + background-clip: text 为什么不能直接给下划线上色
渐变文字本身靠 background-image 配合 background-clip: text 和 -webkit-text-fill-color: transparent 实现，但下划线（text-decoration: underline）是独立绘制的装饰层，它**完全不继承文字的背景或透明填充**，所以默认永远是 currentColor 或指定的单一颜色，和文字渐变毫无关系。
用 border-bottom 模拟下划线并套用渐变背景
这是最可控、兼容性够用（Chrome 12+、Firefox 107+、Safari 15.4+）的方案：放弃原生 text-decoration，改用 border-bottom，再通过 background-image + background-clip: border-box 把渐变“铺”到边框区域上。
关键点：
-
border-bottom必须设为实线（solid），宽度建议 ≤ 2px，太粗会模糊渐变过渡 -
background-image要匹配文字长度，所以得配合display: inline-block或display: inline-flex，让容器收缩包裹文字 -
background-clip: border-box是必须的，否则渐变只作用于文字内容区，边框还是单色 - 需要
padding-bottom留出边框空间，否则文字会被遮挡
示例：
.gradient-underline {
display: inline-block;
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4);
background-clip: border-box;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
用 mask-image 截取渐变边框（更精确但兼容性差）
如果必须保持原生 text-decoration 行为（比如自动换行时下划线连续），可以借助 mask-image 对一个带渐变背景的伪元素做形状裁剪。但这个方案在 Safari 上支持不稳定，Firefox 目前不支持 mask-image 用于伪元素。
常见错误现象：
- 写了
mask-image: linear-gradient(...)却没加-webkit-mask-image前缀，导致 Chrome 不生效 - 伪元素
::after的content设为空字符串但忘了display: block，mask 完全不触发 - mask 渐变方向和文字方向没对齐，下划线看起来“错位”或半截消失
性能影响：每次重排都会重新计算 mask 区域，长段落频繁更新时比 border-bottom 方案略重。
别忽略 line-height 和 baseline 对齐问题
用 border-bottom 模拟下划线时，文字基线（baseline）和边框位置不是天然对齐的。如果 line-height 过大或字体本身有下沉设计（比如某些中文字体），下划线会明显偏低，像挂在文字下面而不是贴着。
解决方法：
- 统一设置
line-height: 1或具体数值（如1.2），避免继承父级不可控值 - 用
transform: translateY()微调边框垂直位置，例如transform: translateY(2px) - 慎用
vertical-align，它会影响行内布局流，容易引发意外换行或间隙
最容易被忽略的是：当文字混排中英文或图标时，不同字体的 baseline 高度差异会让渐变下划线在视觉上“断开”，这时候得用 font-feature-settings: "tnum" 或统一字体栈来收束高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
