<p>box-sizing: border-box 是最直接有效的解法：它使 width 和 height 包含 border 和 padding，浏览器自动向内压缩内容区，避免按钮因边框而撑大；推荐全局设置 * { box-sizing: border-box; }，IE8+ 兼容。</p>
box-sizing: border-box 是最直接有效的解法
按钮加 border 后变大，不是边框本身“错”，而是浏览器默认用 content-box 盒模型：你写的 width: 100px 只算内容区，border: 2px 会额外加在两边，总宽变成 104px。
设 box-sizing: border-box 后，width 和 height 就代表最终渲染尺寸，border 和 padding 全部向内挤占，内容区自动缩小 —— 按钮不会撑开。
- 单个按钮写法：
button { width: 120px; height: 40px; border: 2px solid #333; box-sizing: border-box; } - 推荐全局重置：
* { box-sizing: border-box; }（现代项目基本都这么干，IE8+ 兼容） - 注意：
margin不受box-sizing影响，它始终在盒子外，别误以为是边框导致的间距问题
想完全不占空间？用 outline 或 box-shadow 替代 border
outline 天然不参与布局，但它不能设圆角、不支持单边控制，且必须显式声明 outline-style 才生效 —— 写 outline-width: 2px 却没效果，大概率是漏了 outline-style: solid。
box-shadow 更灵活，比如 box-shadow: 0 0 0 2px #333 能模拟 2px 边框，且 getBoundingClientRect() 返回的尺寸完全不变，适合 hover 加边框又怕抖动的场景。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须保证：
blur为 0、offset为0 0，只靠spread（第四个值）控制粗细 - 错误写法：
box-shadow: 0 2px 4px #000→ 有模糊和偏移，视觉上“撑开”且边缘发虚 - 小数
spread（如0.5px）在非 100% 缩放下可能四舍五入失效，建议用整数
悬停时按钮跳动？预设透明边框比临时加 border 更稳
如果只是 hover 时才加 border，浏览器要重排布局，相邻元素可能轻微位移 —— 特别是在 flex 容器里。
更稳妥的做法是初始就设好边框，只改颜色：
- 初始：
button { border: 2px solid transparent; } - hover：
button:hover { border-color: #007bff; } - 这样宽高零变化，也不依赖
box-sizing切换，兼容性拉满
为什么有时设了 border-box 还是变大？检查 padding 和父容器
box-sizing: border-box 管的是 width/height 与 border/padding 的关系，但如果你同时设了大 padding，内容区会被进一步压缩，视觉上可能显得“按钮变小了”，于是下意识调大 width，反而让整体更大。
另外，父容器若用了 overflow: hidden 或 flex-shrink: 0 等约束，也可能掩盖真实尺寸变化，建议用浏览器开发者工具直接看 Computed 面板里的 width 和 border 值。
真正容易被忽略的，是那些没写单位的 border（比如 border: 2 solid #000），CSS 会静默忽略整条声明 —— 务必写全 border: 2px solid #000。
