border 语法和用法

自网络诞生之初，边框就已经成为设计的标准。

与我们将要介绍的其他两种方法相比，一个重要的区别是，默认情况下，border 包含在元素的计算尺寸中。即使您设置 box-sizing：border-box，border 仍然会计入计算中。

Border 最基本的语法定义了边框的宽度和样式：

1. border: 3px solid; 

如果未定义则默认颜色为 currentColor，这意味着它将在级联中使用最接近的颜色定义。

但 border 有更多的样式可供选择，如果你愿意，使用 border-style 你可以为每一面定义不同的样式。

何时使用 border？

当元素的尺寸允许样式计算时，border 是一个可靠的选择(双关语)，默认样式给了设计很大的灵活性。

outline 语法和用法

对于outline，使其可见的唯一必需属性是提供一种样式，因为默认值为 none：

1. outline: solid; 

和border一样，它将通过 currentColor 获得颜色，它的默认宽度为 medium。

outline 的典型应用是通过本机浏览器样式对 :focus 元素(如链接和按钮)进行聚焦。

除非您能够提供符合WCAG Success Criterion 2.4.7 Focus Visible的自定义 :focus 样式，否则应该允许发生这种特定的应用，以达到无障碍的目的。

出于设计目的，通常要注意的 outline 问题是它无法从任何 border-radius 样式继承曲线。

何时使用 outline？

当您不想影响元素的尺寸并且不需要其遵循 border-radius 时，可以使用outline线。

box-shadow 语法和用法

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

1. box-shadow: 5px 8px black; 

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

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