🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
1) border 会改变布局（占据空间）
border 会参与盒模型，增加元素尺寸。
例如，一个宽度 200px 的元素加上 border: 1px solid #000，实际宽度会变成：
200 + 1px(left) + 1px(right) = 202px
如果不想影响布局，就很麻烦。
使用 box-shadow: 0 0 0 1px #000不会改变大小，看起来像 border，但不占空间。
2) border 在高 DPI 设备上容易出现“模糊/不齐”
特别是 0.5px border（发丝线），在某些浏览器上有锯齿、断线。
transform: scale(0.5) 或伪元素能做更稳定的发丝线。
3) border 圆角 + 发丝线 常出现不规则效果
border + border-radius 在不同浏览器的渲染不一致，容易出现不均匀、颜色不一致的问题。
用 outline / box-shadow 圆角更稳定。
4) border 不适合做阴影/多层边框
如果你需要两层边框：
双层边框用 border 很难做
而用：
box-shadow: 0 0 0 1px #333, 0 0 0 2px #999;
非常简单。
5) border 和背景裁剪一起用时容易出 bug
比如 background-clip、overflow: hidden 配合 border 会出现背景被挤压、不应该被裁剪却裁剪等问题。
6) hover/active 等状态切换时会“跳动”
因为 border 会改变元素大小。
例子：
.btn { border: 0; }
.btn:hover { border: 1px solid #000;
鼠标移上去会抖动，因为尺寸变大了。
用 box-shadow 的话就不会跳。
除了动态外有时候 overflow 也会导致原本刚刚好的布局不会删除滚动条，由于有了 border 1px 导致刚好出现滚动条但其实根本滚不了。
总结
边框可以分别使用border、outline、box-shadow三种方式去实现，其中outline、box-shadow不会像border一样占据空间。而box-shadow可以用来解决两个元素相邻时边框变宽的问题。不使用border并不是因为它不好，而是因为outline和box-shadow的兼容性和灵活性在某些场景中相对border会更方便一点。
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
来源：https://www.cnblogs.com/smileZAZ/p/19697635 |
发表于 2026-3-10 16:08:00
