background-size 实现文字背景渐变填充的原理是利用 linear-gradient 作背景，配合 background-size 的百分比变化（0%→100%）控制横向伸展动画，需设 no-repeat 和 bottom 对齐位置，且不可用 background 简写以免重置 size。
background-size 实现文字背景渐变填充的原理
直接用 background-size 控制文字下划线或背景的“伸展”效果，本质是借助 background-image（通常是线性渐变）配合 background-size: 0% 100% 初始状态，再通过 :hover 改为 100% 100% 触发动画。关键在于：必须把背景设为 background-repeat: no-repeat，且 background-position 需对齐文字底部（如 bottom 或具体数值），否则填充会偏移或重复。
最简可行代码结构（含兼容写法）
以下写法在 Chrome/Firefox/Safari/Edge（现代版）均有效，无需前缀：
span.underline-hover {
background-image: linear-gradient(to right, #007bff, #007bff);
background-repeat: no-repeat;
background-position: bottom;
background-size: 0% 2px;
transition: background-size 0.3s ease;
}
span.underline-hover:hover {
background-size: 100% 2px;
}
注意点：
-
background-size的第一个值控制横向填充比例（0%→100%），第二个值固定为背景高度（如2px） - 不能用
background: linear-gradient(...) 0% 2px简写——简写会重置background-size为默认auto，导致动画失效 - 若文字有多行，
background-position: bottom会让每行都出现独立填充，符合预期；若只想第一行有，改用background-position: bottom left+background-origin: content-box
为什么用 background-size 而不是 width 动画？
用 width 做伪下划线需额外包裹 ，破坏语义且响应式易错；而 background-size 直接作用于文本元素自身，不改变 DOM 结构，也不影响行高、换行、文本对齐等布局行为。更重要的是：
-
background-size动画可硬件加速（尤其搭配will-change: background-size），比width更流畅 - 支持任意形状背景：把
linear-gradient换成radial-gradient或 SVG data URL，就能做出圆形扩散、波纹等效果 - 与
text-decoration共存——text-decoration: underline不会干扰背景动画，可叠加使用
常见失效原因和修复方式
实际写的时候，90% 的问题出在三个地方：
- 没设
background-repeat: no-repeat→ 背景重复铺满，background-size: 0% 2px看不出变化 -
background-position写成0 0或漏写 → 填充从左上角开始，而不是贴着文字底部 - 父容器有
overflow: hidden且子元素未设display: inline-block→ 动画过程中背景超出文字范围被裁切（此时加display: inline-block可解决） - 在 Safari 中动画卡顿？补一句
transform: translateZ(0)或will-change: background-size
复杂点在于：background-size 的百分比是相对于元素自身的宽高计算的，所以如果文字外层有 padding 或 margin，不影响动画逻辑，但会影响视觉起始位置——这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
