background-position动画不生效的直接原因是css transition默认不监听该属性变化，需显式声明transition: background-position .3s ease，且须用具体数值（如0% 0%）、保持渐变方向一致、避免center等关键字。
button:hover 时 background-position 动画不生效
直接原因：CSS transition 默认不监听 background-position 的变化，除非你显式声明。很多同学写了 transition: all .3s 就以为万事大吉，结果 hover 上去光影纹丝不动。
实操建议：
- 必须写明过渡属性：
transition: background-position .3s ease，别偷懒用all -
background-position要用具体数值（如0% 0%或20px 10px），不能用center这类关键字，否则浏览器无法插值计算 - 初始状态和 hover 状态都得设
background-image（通常是线性渐变），且渐变方向一致，否则位移错乱
示例关键片段：
button {
background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0) 50%);
background-position: 0% 0%;
transition: background-position .3s ease;
}
button:hover {
background-position: 100% 100%;
}
用 radial-gradient 模拟高光但边缘发虚
问题出在径向渐变的默认形状和尺寸——radial-gradient(circle, ...) 在小按钮上容易撑出模糊晕染，看起来像没对焦。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 改用
radial-gradient(ellipse at 20% 30%, ...)明确高光落点，避免居中死板 - 控制尺寸：
radial-gradient(ellipse 20px 10px at 20% 30%, ...)，两个像素值分别约束宽高，防止拉伸变形 - 高光色到透明的过渡段要短，比如
#fff 70%, transparent 71%，避免灰蒙蒙的渐变带
移动端 touch 事件下光影延迟或不触发
iOS Safari 和部分安卓 WebView 对 :hover 支持不稳定，尤其在无 hover 意图的触屏设备上，:hover 可能只在点击后短暂触发，甚至被忽略。
实操建议：
- 加一层
:active声明，覆盖触摸瞬间：button:active { background-position: 100% 100%; } - 对 iOS 加
cursor: pointer，能激活部分 hover 行为（虽不保证，但有胜于无） - 更稳妥的做法是用 JavaScript 监听
touchstart/touchend切换 class，避开伪类依赖
多层背景叠加时 z-index 无效导致光影被遮盖
CSS background 是绘制层，不是 DOM 层，不存在 z-index。当按钮同时有边框、文字阴影、图标字体、伪元素等，光影很容易被其他视觉元素盖住。
实操建议：
- 把光影作为最底层背景：
background: linear-gradient(...), [其他背景]，逗号分隔，越靠前越底层 - 避免用
::before画光影——它属于伪元素层，层级受z-index控制，反而更难对齐和响应 - 如果必须用伪元素，确保其
content: ""、position: absolute、z-index: -1，且父容器position: relative
拟物光影真正难的不是动效本身，而是不同设备渲染精度差异、背景层叠顺序的隐式规则、以及 touch/hover 混合交互下的状态同步——这些地方一松懈，光就偏了。
