直接给img加background-color不生效，因其默认为inline元素且无显式宽高，背景无法渲染；懒加载时src常为空或移至data-src，导致img成空标签，fallback亦不触发，须用容器包裹并设样式。
为什么直接给 img 加 background-color 不生效
因为 img 默认是 inline 元素，不设 display: block 和显式宽高，背景根本不会渲染；更关键的是，懒加载常把 src 清空或挪到 data-src，此时 img 就是空标签，连 fallback 都不触发。必须用容器包裹，比如 <div class="skeleton-img"></div>，再对这个 div 设样式。
background-position 动画不动？检查这三处
写完 @keyframes shine { to { background-position: 200% 0; } } 却没效果，大概率不是语法错，而是背景本身不可平移：
- 背景必须是「有纹理」的：用
linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)，别用纯色background: #f0f0f0 -
background-size必须大于容器宽度：比如background-size: 200px 100%（不能用rem或vw，iOS Safari 会忽略） - 动画必须配
background-repeat: no-repeat，否则光条重复出现、跳变
多个骨架块怎么避免“齐步走”
所有骨架一起滑，反而显得假——真实加载是异步的。CSS 不支持随机 delay，但可用预设 stagger 打破同步：
- 给不同区块加语义 class：
.skeleton-avatar、.skeleton-title、.skeleton-paragraph - 分别设
animation-delay: 0s、0.2s、0.4s，形成自然错落 - 别用 JS 动态加 delay：首屏骨架必须纯 CSS，否则 SSR 或禁 JS 环境下失效
移动端圆角边缘发虚、光效错位？
尤其在 iPhone 上，骨架圆角区域常露出白边，或扫光动画卡顿——不是代码逻辑问题，是渲染层细节没控住：
立即学习“前端免费学习笔记（深入）”；
- 每个骨架容器必须加
overflow: hidden，否则渐变滑出圆角会露底色 - 避免用
transform: translateX()模拟扫光：Safari 和部分安卓 WebView 中边缘发虚、锯齿明显 -
background-position动画比transform更稳，因它只改绘制起点，不触发重排重绘 - 图片类占位优先用
aspect-ratio: 16 / 9+width: 100%，别写死height，否则缩放失真
background-size 单位和 overflow: hidden 的组合——iOS Safari 对 rem 单位完全不认，而漏掉 overflow 会导致圆角区域直接穿帮。 
