background-position 无法可靠实现星星动态填充，因浏览器默认不触发重绘；推荐双层 span 盖层、clip-path inset()（需兼容 fallback）或 background-size + background-clip: text 方案。
transition 无法让 background-position 动态填充星星？
直接用 background-position 配合 transition 做从左到右的渐变填充，多数情况下会失效——因为 background-position 的过渡在 css 中默认不触发重绘（尤其当背景是纯色或线性渐变时），浏览器可能直接跳变。
- 真正起作用的是
background-size+background-clip: text或遮罩层模拟，但更稳妥的是用两个重叠的<span></span>：一个灰色底星，一个彩色盖层，控制盖层的width+overflow: hidden - 如果坚持用背景图，必须确保背景图本身支持平铺/裁剪，并设置
background-repeat: no-repeat和明确的background-size值（如200% 100%），再配合background-position: 0% 0%→100% 0%过渡 - 注意：
background-position只对百分比或长度值过渡有效，left/right关键字不会触发动画
用 clip-path 实现平滑填充但 safari 不认？
clip-path: inset(0 100% 0 0) 是最干净的方案之一，通过动态缩进右侧来“露出”彩色星星，但 Safari 对 inset() 的百分比过渡支持直到 ios 15.4+ 才稳定，旧版本会卡顿或失效。
- 兼容写法是 fallback 到
transform: scaleX()盖层 +overflow: hidden容器，虽然多一层 dom，但全平台一致 - 别用
clip-path: polygon()动态计算顶点——性能差，且 chrome/firefox 对 polygon 插值实现不统一，容易出现锯齿或跳帧 - 若用
clip-path，务必加will-change: clip-path提前提示合成层，否则频繁交互下掉帧明显
hover 时星星颜色突变而不是平滑过渡？
常见原因是给 :hover 设置了新颜色但没声明 transition，或者过渡属性写成了 all 导致意外触发其他属性动画（比如 box-shadow 抖动）。
- 只过渡关键属性：
transition: width 0.3s ease, background-color 0.3s ease（如果用 width 方案）或transition: clip-path 0.3s ease - 避免在父容器上设
transition，星星内部状态变化应由子元素自身控制；否则 hover 父级时所有星星一起动，逻辑错乱 - 移动端没有
:hover，得用:focus-within或 js 绑定touchstart模拟，否则测试时以为“动不了”其实是没触发
5 颗星评分，点击后 fill 不跟手？
用户点第三颗星，但视觉上只填到第二颗半——这通常是因为事件坐标计算用了 offsetX，而星星是 inline 元素，padding/margin/border 会让实际可点击热区和视觉边界错位。
立即学习“前端免费学习笔记（深入）”；
- 用
getBoundingClientRect()+clientX算相对位置更准，再除以单颗星宽度取整：math.ceil((e.clientX - rect.left) / starWidth) - 别依赖
e.target判断点击哪颗星，用户可能点在星与星之间的空隙，应统一监听容器，再按 x 坐标映射 - JS 设置
style.width后，记得触发一次offsetHeight强制重排，避免 Vue/React 中因异步更新导致过渡不触发
最麻烦的其实是小数评分（比如 3.7 星）——这时候不能只靠整数 width，得用 background-image 渐变叠加或 canvas 绘制，CSS 本身不支持“部分填充矢量图标”的原生过渡。