box-shadow 和 border 同时存在不会导致尺寸误差，真正原因是盒模型计算不当或视觉错觉；必须设 box-sizing: border-box，避免 content-box 下 border 撑宽、flex/grid 计算失准及 hover 重排。
box-shadow 和 border 同时存在时，不会导致尺寸误差；真正出问题的是你没控制好盒模型计算方式，或者误把视觉错觉当成了布局偏移。
为什么加了 border 和 box-shadow 后卡片“变大了”？
这不是阴影或边框本身撑开了尺寸——box-shadow 永远不参与布局，border 是否撑开取决于 box-sizing。常见错觉来源：
- 元素默认是
box-sizing: content-box，此时width: 300px; border: 2px solid #000;实际占宽 304px -
box-shadow虽不占空间，但模糊扩散（如blur-radius: 12px）会让视觉重心外移，人眼觉得“溢出了” - 父容器设了
overflow: hidden，而你又没预留足够padding，阴影被裁，看起来像卡片“顶到边”
box-sizing: border-box 是必须项，不是可选项
只要卡片有 border 或需要稳定宽度，就必须显式设 box-sizing: border-box。否则：
- 响应式断点下容易因 border 突然出现导致换行
- Flex/Grid 中子项宽度计算失准，
flex-basis或grid-column行为异常 - hover 时加 border 或改颜色，会触发重排（哪怕只是 1px）
推荐全局初始化：* { box-sizing: border-box; }，再对特殊元素（如 img、canvas）单独重置。
border 和 box-shadow 叠加时的参数避坑点
两者共存时，最容易暴露问题的是参数冲突：
-
border-radius必须 ≥border-width，否则圆角处边框会“露直角”，阴影也难贴合 - 用
box-shadow模拟边框（如0 0 0 2px #ccc）时，别再叠加真实border，否则视觉上变粗且边缘发虚 - 双层阴影写法（如
0 1px 2px -1px rgba(0,0,0,0.1), 0 1px 3px 0 rgba(0,0,0,0.05)）比单层更稳，负spread-radius能收紧边缘，避免盖住文字 - 若用
outline做辅助边框，注意它不走盒模型——outline-offset才是控制距离的关键，且overflow: hidden会直接裁掉它
真正卡住尺寸表现的，往往是祖先容器的 overflow 和 gap/margin 混用
卡片自身写得再规范，也扛不住父级乱设 overflow 或在 Flex/Grid 里滥用 margin：
- Flex 容器上设
overflow: hidden+ 卡片带底部阴影 → 阴影被切，加padding-bottom是治标，改overflow: visible或用gap分隔才是根治 - 给卡片设
margin-right控制间距，结果首尾多出空白、右侧阴影被父容器裁掉 → 改用gap，卡片自身保持margin: 0 - Grid 容器中，
grid-gap已废弃，必须用gap；若还混用margin，会导致轨道尺寸计算混乱，阴影位置飘忽
复杂点在于：这些属性的交互不报错，也不警告，只在特定缩放、特定浏览器（尤其是 Safari）下才暴露。上线前务必在真机上拖动滚动、悬停、缩放验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
