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 提供的某些样式。