仅用 background-color 做骨架屏会导致视觉发灰、深色模式失效、不响应尺寸变化；真正可用的 skeleton 需具备真实内容的盒模型行为，应结合 linear-gradient 控制节奏、aspect-ratio 保形、clip-path/border-radius+overflow: hidden 确保圆角、opacity 过渡避免闪动，并统一 line-height 与 font-family 防抖动。
为什么 skeleton 屏不能只靠 background-color 硬填
纯用 background-color 做骨架屏，视觉上容易“发灰”或“漂浮”，尤其在深色模式下直接失效；更关键的是，它不响应容器尺寸变化，一旦父元素 padding/margin 动态调整，色块就错位。真正可用的 skeleton，得让占位区块具备和真实内容一致的盒模型行为。
用 linear-gradient 模拟文字/图片的色块节奏
文字行、头像、卡片标题这些结构有明显宽高比和间距规律，用渐变比纯色更可控：
-
background-image: linear-gradient(#e0e0e0 0%, #e0e0e0 100%)是基础，但没节奏 —— 改成多段渐变才能模拟“标题+两行描述+按钮”的排布 - 例如一行标题：设
background-size: 100% 16px+background-position: 0 8px，再配合background-repeat: no-repeat，就能精准卡在行高中间 - 图片占位更需注意：用
aspect-ratio配合background-image，否则在 flex/grid 容器里会被拉伸变形
clip-path 和 border-radius 联用控制边缘柔和度
真实 skeleton 屏的圆角不是装饰，是识别信号 —— 用户一眼看出这是“占位”，不是真实内容。但只写 border-radius: 8px 在某些浏览器（如旧版 Safari）会漏出直角边：
- 必须同时加
overflow: hidden，否则圆角内背景会溢出 - 头像类圆形占位，优先用
clip-path: circle(50% at 50% 50%)，比border-radius: 50%兼容性更稳，且不受 border 影响 - 注意：如果父容器用了
transform（比如动画中），clip-path在部分 Chrome 版本会失效，此时退回border-radius+overflow: hidden
如何让 skeleton 在加载完成时自然消失不闪动
常见错误是用 display: none 切换，导致布局重排、内容“跳一下”。正确做法是保持 DOM 占位，仅切换视觉状态：
立即学习“前端免费学习笔记（深入）”；
- 给 skeleton 元素加 class
skeleton，加载完成时移除该 class，CSS 中用.skeleton { opacity: 0.6; transition: opacity 0.2s ease } - 不要用
visibility: hidden，它虽然保留占位，但会阻断 pointer-events，影响后续调试 - 如果 skeleton 和真实内容结构不完全一致（比如真实图有
object-fit: cover，而 skeleton 是纯色块），务必保证两者height/min-height严格一致，否则过渡瞬间仍会抖动
最常被忽略的是 font fallback 导致的行高差异：骨架屏里用系统默认字体，而真实内容用了 webfont，加载期间 line-height 可能突变。解决方案是 skeleton 元素显式声明 line-height 和 font-family: system-ui, sans-serif，和真实内容对齐。
