如何用CSS解决卡片阴影和边框叠加后的尺寸误差？

box-shadow 和 border 同时存在不会导致尺寸误差，真正原因是盒模型计算不当或视觉错觉；必须设 box-sizing: border-box，避免 content-box 下 border 撑宽、flex/grid 计算失准及 hover 重排。

box-shadow 和 border 同时存在时，不会导致尺寸误差；真正出问题的是你没控制好盒模型计算方式，或者误把视觉错觉当成了布局偏移。

为什么加了 border 和 box-shadow 后卡片“变大了”？

这不是阴影或边框本身撑开了尺寸——box-shadow 永远不参与布局，border 是否撑开取决于 box-sizing。常见错觉来源：

1. 元素默认是 box-sizing: content-box，此时 width: 300px; border: 2px solid #000; 实际占宽 304px
2. box-shadow 虽不占空间，但模糊扩散（如 blur-radius: 12px）会让视觉重心外移，人眼觉得“溢出了”
3. 父容器设了 overflow: hidden，而你又没预留足够 padding，阴影被裁，看起来像卡片“顶到边”

box-sizing: border-box 是必须项，不是可选项

只要卡片有 border 或需要稳定宽度，就必须显式设 box-sizing: border-box。否则：

1. 响应式断点下容易因 border 突然出现导致换行
2. Flex/Grid 中子项宽度计算失准，flex-basis 或 grid-column 行为异常
3. hover 时加 border 或改颜色，会触发重排（哪怕只是 1px）

推荐全局初始化：* { box-sizing: border-box; }，再对特殊元素（如 img、canvas）单独重置。

border 和 box-shadow 叠加时的参数避坑点

两者共存时，最容易暴露问题的是参数冲突：

1. border-radius 必须 ≥ border-width，否则圆角处边框会“露直角”，阴影也难贴合
2. 用 box-shadow 模拟边框（如 0 0 0 2px #ccc）时，别再叠加真实 border，否则视觉上变粗且边缘发虚
3. 双层阴影写法（如 0 1px 2px -1px rgba(0,0,0,0.1), 0 1px 3px 0 rgba(0,0,0,0.05)）比单层更稳，负 spread-radius 能收紧边缘，避免盖住文字
4. 若用 outline 做辅助边框，注意它不走盒模型——outline-offset 才是控制距离的关键，且 overflow: hidden 会直接裁掉它

真正卡住尺寸表现的，往往是祖先容器的 overflow 和 gap/margin 混用

卡片自身写得再规范，也扛不住父级乱设 overflow 或在 Flex/Grid 里滥用 margin：

1. Flex 容器上设 overflow: hidden + 卡片带底部阴影 → 阴影被切，加 padding-bottom 是治标，改 overflow: visible 或用 gap 分隔才是根治
2. 给卡片设 margin-right 控制间距，结果首尾多出空白、右侧阴影被父容器裁掉 → 改用 gap，卡片自身保持 margin: 0
3. Grid 容器中，grid-gap 已废弃，必须用 gap；若还混用 margin，会导致轨道尺寸计算混乱，阴影位置飘忽

复杂点在于：这些属性的交互不报错，也不警告，只在特定缩放、特定浏览器（尤其是 Safari）下才暴露。上线前务必在真机上拖动滚动、悬停、缩放验证。