1) border 会改变布局（占据空间）
border 会参与盒模型，增加元素尺寸。
例如，一个宽度 200px 的元素加上 border: 1px solid #000，实际宽度会变成：
plain
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 不适合做阴影/多层边框
如果你需要两层边框：
plain
双层边框用 border 很难做而用：
plain
box-shadow: 0 0 0 1px #333, 0 0 0 2px #999;非常简单。
5) border 和背景裁剪一起用时容易出 bug
比如 background-clip、overflow: hidden 配合 border 会出现背景被挤压、不应该被裁剪却裁剪等问题。
6) hover/active 等状态切换时会"跳动"
因为 border 会改变元素大小。
例子：
plain
.btn { border: 0; }
.btn:hover { border: 1px solid #000; }鼠标移上去会抖动，因为尺寸变大了。
用 box-shadow 的话就不会跳。
总结
边框可以分别使用border、outline、box-shadow三种方式去实现，其中outline、box-shadow不会像border一样占据空间。而box-shadow可以用来解决两个元素相邻时边框变宽的问题。所以outline和box-shadow的兼容性和灵活性会更好一点