骨架屏不该有边框——别把 Skeleton 塞进 Card 组件

给一个卡片列表页加加载骨架屏，第一稿出来之后发现每张骨架卡都带着一圈粗黑边框。查了一圈发现根因是裸写了 border 类——Tailwind v4 里未指定颜色的 border 默认 currentColor，几乎是黑色。

修边框的第一反应是：既然要复用设计系统，干脆把骨架块包进已有的 Card 组件，"这样边框和圆角都能从 Card 继承，还省得手写样式"。结果新问题比旧问题更难看。

现象

骨架屏每张卡片都有明显边框 + 阴影，加载期间整个页面看起来比内容加载完成后"更重"。
用 Card 包裹 Skeleton 块之后，边框 + 阴影确实来自设计系统，"语义上正确"，但骨架态和加载完成态的视觉切换出现了border-pop：骨架屏无边框（shimmer 块本身）→ 内容加载完 Card 有边框，整个列表闪了一下。
想用 CSS 微调把 Card 的边框在骨架态去掉，越改越绕。

根因

骨架屏的设计惯例是无铬（chromeless）——只有布局占位 + 闪光动画，不带任何视觉容器（无边框、无阴影、无背景色卡壳）。Ant Design、MUI 的 Skeleton 组件都遵循这一原则。

把 Skeleton 块塞进 Card 本质上是误用了"复用组件"的原则。Card 是为已渲染内容提供视觉容器的，骨架屏是占位符，两者的视觉职责不同，强行共用一个组件等于让占位符继承了它不需要的所有视觉属性。

坑：Card 的边框会打架 Skeleton 的 shimmer

Card 带着 border + shadow，Skeleton 的 shimmer 动画是在纯色背景上做渐变扫描。两者叠加：一是视觉上更沉，二是内容加载完成时 Card 的边框和 shimmer 块的无边框状态切换会产生一次肉眼可见的闪跳（border-pop）。"复用设计系统组件"的出发点是对的，但要复用正确的那个组件——骨架屏的基础单元是 Skeleton 原语，不是 Card。

另一个更基础的坑在于修复路径的选择：看到"边框太丑"时，第一个问题应该是**"能不能直接删掉它？"**，而不是"换个什么更合适的边框/组件？"。对于骨架屏，答案是直接删。

正解

骨架屏就是一组 chromeless 的 Skeleton 块加上空间布局，没有任何容器 chrome：

// 错误：把骨架块塞进 Card，继承了不需要的边框/阴影
function CardSkeleton() {
  return (
    <Card className="p-4">
      <Skeleton className="h-6 w-3/4" />
      <Skeleton className="h-4 w-1/2 mt-2" />
      <Skeleton className="h-4 w-2/3 mt-2" />
    </Card>
  );
}
 
// 正确：chromeless，只有布局
function CardSkeleton() {
  return (
    <div className="space-y-3 p-4">
      <Skeleton className="h-6 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
      <Skeleton className="h-4 w-2/3" />
    </div>
  );
}
 
// 列表：grid 布局直接铺，不需要任何外层卡壳
function CardListSkeleton() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {Array.from({ length: 6 }).map((_, i) => (
        <CardSkeleton key={i} />
      ))}
    </div>
  );
}

如果这类骨架组合在多个页面复用，把它封装进设计系统包作为 CardSkeleton/ListSkeleton/TableSkeleton 的预设组件——但要从 Skeleton 原语构建，不是从 Card。

正解：chromeless Skeleton 块 + 布局 div

骨架屏只需要 Skeleton 原语 + space-y-*/grid 等布局工具，不需要任何带 border/shadow 的外层容器。如果对布局偏移敏感，用 min-h-* 或固定 h-* 匹配加载完成态的尺寸，而不是靠 Card 的 padding/border 来"撑"尺寸。

排查确认

用浏览器审查骨架区域，确认 className 里没有 border/shadow token：

// 控制台验证
document.querySelectorAll('[data-skeleton-card]').forEach(el => {
  console.assert(!el.className.includes('border'), '骨架卡不应有边框');
  console.assert(!el.className.includes('shadow'), '骨架卡不应有阴影');
});

视觉标准：只有闪光块浮在页面背景上，没有任何矩形框轮廓。

一句话外卖

骨架屏是占位符，不是内容容器——chromeless（无边框/无阴影）是业界惯例，把 Skeleton 塞进 Card 是用错了复用对象，修的正确姿势是直接删铬，而不是换一种铬。