如何用CSS制作骨架屏加载效果？

直接给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; } } 却没效果，大概率不是语法错，而是背景本身不可平移：

1. 背景必须是「有纹理」的：用 linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)，别用纯色 background: #f0f0f0
2. background-size 必须大于容器宽度：比如 background-size: 200px 100%（不能用 rem 或 vw，iOS Safari 会忽略）
3. 动画必须配 background-repeat: no-repeat，否则光条重复出现、跳变

多个骨架块怎么避免“齐步走”

所有骨架一起滑，反而显得假——真实加载是异步的。CSS 不支持随机 delay，但可用预设 stagger 打破同步：

1. 给不同区块加语义 class：.skeleton-avatar、.skeleton-title、.skeleton-paragraph
2. 分别设 animation-delay: 0s、0.2s、0.4s，形成自然错落
3. 别用 JS 动态加 delay：首屏骨架必须纯 CSS，否则 SSR 或禁 JS 环境下失效

移动端圆角边缘发虚、光效错位？

尤其在 iPhone 上，骨架圆角区域常露出白边，或扫光动画卡顿——不是代码逻辑问题，是渲染层细节没控住：

1. 每个骨架容器必须加 overflow: hidden，否则渐变滑出圆角会露底色
2. 避免用 transform: translateX() 模拟扫光：Safari 和部分安卓 WebView 中边缘发虚、锯齿明显
3. background-position 动画比 transform 更稳，因它只改绘制起点，不触发重排重绘
4. 图片类占位优先用 aspect-ratio: 16 / 9 + width: 100%，别写死 height，否则缩放失真

真实项目里最容易被忽略的，是 background-size 单位和 overflow: hidden 的组合——iOS Safari 对 rem 单位完全不认，而漏掉 overflow 会导致圆角区域直接穿帮。