直接给加背景色无效，因其为inline元素且懒加载时src为空；须用带显式尺寸的容器包裹，配合渐变背景、正确background-size及动画设置，并确保骨架与真实图片样式完全一致。
为什么直接给 <img> 加背景色不管用
很多人一上来就写 img { background: #f0f0f0; }，结果页面啥也没显示——因为 <img> 默认是 inline 元素，不设 display: block 和显式宽高，背景根本渲染不出来；更糟的是，懒加载常把 src 清空或挪到 data-src，此时 <img> 就是个空标签，连 fallback 都没机会触发。
- 必须用容器包裹：比如
<div class="img-skeleton"></div>，再对这个div设样式 - 容器要显式声明尺寸：至少设
width、height，或更推荐的aspect-ratio: 16 / 9 - 老 Safari（iOS 15.0–15.3）不支持
aspect-ratio？加 fallback：padding-top: 56.25%+position: relative+ 内部position: absolute子元素
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，否则光条会重复出现、跳变
图片加载完成时怎么不闪、不跳、不重排
常见翻车：加个 opacity: 0 → 1，结果骨架还没消失，真实图片就突然撑开，页面抖一下；或者用 display: none 切换，导致布局重排。
- 真实
<img>要绝对定位盖在骨架容器上，初始opacity: 0、visibility: hidden - 监听
img.onload后，只加一个 class（如is-loaded），里面只写opacity: 1; visibility: visible - 过渡靠
transition: opacity 0.3s ease，别动transform或display - 骨架层如果是
::before，记得在.is-loaded::before { display: none; }关掉它
移动端圆角边缘发虚、光效错位？
尤其在 iPhone 上，骨架圆角区域常露出白边，或扫光动画卡顿——不是代码逻辑问题，是渲染层细节没控住。
- 每个骨架容器必须加
overflow: hidden，否则渐变背景滑出圆角会露底色 - 避免用
transform: translateX()模拟扫光：Safari 和部分安卓 WebView 中边缘发虚、锯齿明显 -
background-position动画比transform更稳，因它只改绘制起点，不触发重排重绘 - 如果用了多层渐变（结构层 + 扫光层），两层的
background-size和background-position必须严格一致，否则光条漂移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
