用 background-image 配合 linear-gradient 和 background-size 实现悬停填充：初始 background-size: 0% 100%，悬停时变为 100% 100%，配合 transition 并设 background-repeat: no-repeat，可稳定顺滑填充空心按钮背景。
空心按钮怎么用 background 实现悬停填充
纯边框的空心按钮（border + transparent 背景）没法直接用 transition 做“从无到有”的填充效果——background-color 从 transparent 到实色确实能过渡，但视觉上常有闪烁或不连贯感，尤其在 Safari 或旧版 Chrome 中。
真正稳定、顺滑的做法是：用 background-image 配合 linear-gradient 模拟“从左到右”或“从中心扩散”的填充，再靠 background-size 和 background-position 控制起始状态。
-
background: linear-gradient(to right, #007bff, #007bff)定义单色渐变（本质是纯色条） - 初始设
background-size: 0% 100%（宽度为 0），background-position: left center - 悬停时改为
background-size: 100% 100%，配合transition: background-size 0.3s ease - 必须显式声明
background-repeat: no-repeat，否则渐变会平铺干扰效果
为什么不用 border-bottom + transform 模拟填充
有人用 ::after 伪元素 + transform: scaleX(0) 做底部横线扩展，看起来像“填充”，但它只覆盖单边，和真正背景填充的视觉权重不同。如果按钮需要整个背景区域被填满（比如带圆角、阴影、文字居中对齐），这种方案容易错位或遮挡文字。
更关键的是：伪元素方案无法响应点击热区变化（pointer-events 默认继承，但扩展动画期间若父元素 overflow: hidden 可能裁剪），而背景填充天然属于按钮自身盒模型，热区始终一致。
- 伪元素方案需额外设置
z-index和定位偏移，维护成本高 - 圆角按钮中，
transform: scaleX()会拉伸内容，导致边缘模糊或锯齿 - 如果按钮用了
box-shadow，伪元素无法继承，得重复写一遍
transition 触发不了？检查这几个地方
transition 不生效，90% 是因为属性不可动画或初始/终态没形成有效差值。对背景填充来说，最容易踩的坑不是写法，而是 CSS 层级和重置干扰：
-
background-size必须写成两个值（如0% 100%），不能只写0%—— 单值会被解析为0% 0%，悬停时变成100% 100%就不是“横向扩展”而是“等比放大” - 确保没在其他地方用
!important覆盖了悬停样式，特别是框架自带的button:focus样式可能劫持background - 如果按钮用了
background: none或background: initial，会清空渐变定义，得用background: transparent代替 - Firefox 对
background-size的百分比过渡支持较晚，建议加-moz-background-size兼容（虽然现代版本已不需要）
圆角按钮填充要边缘对齐，怎么调
当按钮有 border-radius，单纯扩展背景会露出直角接缝。解决方法不是改 border-radius，而是让渐变本身“贴边”：
- 把
background-image改成linear-gradient(to right, #007bff 50%, transparent 50%)，再配合background-size: 200% 100%—— 这样 0% 状态下只显示左半段透明，100% 状态下整段色块刚好填满 - 更稳妥的做法是用
mask：给按钮加-webkit-mask-image: radial-gradient(circle, black 50%, transparent 51%)，再对background-color做过渡，但兼容性略差（IE 完全不支持） - 如果必须兼容 IE，老老实实用两层元素：外层
overflow: hidden+ 内层transform: scaleX(0)，但得放弃纯 CSS 方案
实际项目里，多数情况用第一种渐变微调就够了；真正麻烦的是按钮字体大小动态变化时，background-position 得跟着算，这时候不如写个轻量 JS 监听 resize 后重设 background-size —— 但那是另一回事了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
