使用box-shadow设置边框

box-shadow 的最低要求属性是 x 和 y 轴的值以及颜色：

box-shadow: 5px 8px black;

可以选择添加第三个参数 blur 来制造模糊，第四个参数 spread 来添加模糊扩散程度。

要使用它来创建边框，我们将 x 轴和 y 轴的值以及 blur 都设置为 0 ，然后为spread设置一个正数。

box-shadow: 0 0 0 3px blue;

这将在元素周围创建边框的外观，甚至可以遵循所应用的 border-radius：

何时使用box-shadow

您可能更喜欢 box-shadow，特别是当您想为边框设置动画而不引起布局偏移时。下一节将演示这种情况的示例。

而且由于 box-shadow可以分层，所以它是一个全能的好工具，要了解它来增强你的布局。

但是，它将无法完全模仿 border 和 outline 提供的某些样式。