为什么有些人边框不用border属性

1) border 会改变布局（占据空间）

border 会参与盒模型，增加元素尺寸。

例如，一个宽度 200px 的元素加上 border: 1px solid #000，实际宽度会变成：

plain 复制代码

200 + 1px(left) + 1px(right) = 202px

如果不想影响布局，就很麻烦。

使用 box-shadow: 0 0 0 1px #000不会改变大小，看起来像 border，但不占空间。

特别是 0.5px border（发丝线），在某些浏览器上有锯齿、断线。

transform: scale(0.5) 或伪元素能做更稳定的发丝线。

border + border-radius 在不同浏览器的渲染不一致，容易出现不均匀、颜色不一致的问题。

用 outline / box-shadow 圆角更稳定。

如果你需要两层边框：

plain 复制代码

双层边框用 border 很难做

而用：

plain 复制代码

box-shadow: 0 0 0 1px #333, 0 0 0 2px #999;

非常简单。

比如 background-clip、overflow: hidden 配合 border 会出现背景被挤压、不应该被裁剪却裁剪等问题。

因为 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的兼容性和灵活性会更好一点