#812·themes

[卡片] 内嵌内容不一致

作者: stevesims创建于 2026年7月15日更新于 2026年7月15日

Card 组件中存在一个非常微妙的错误,使其内容的位置与在 Inset 组件中放置的内容相差 1 像素,而 Inset 组件应用了相同的边距,以消除 Card 内部的内边距,并减去 1 像素,用于 Card 的边框宽度。 然而,渲染后的 Card 实际上并未使用真实的边框,而是通过在 Card 内部使用 `::after` 僞元素和内部盒阴影来实现此效果,因此 Card 内容的自然位置不会受到那条假边框的影响。 从逻辑上讲,Inset 组件所做的事情是有效的和正确的,因为如果不补偿 Card 的假边框,则 Inset 内容将与边框重叠,这将是不理想的。 Card 组件实际上应该做的是将边框宽度加到其应用的边距中。 如果它这样做,则 Card 的样式将类似于使用真实边框,而 Inset 组件所做的边距补偿将正确匹配。

内容来源: radix-ui/themes