border与outline 语法和用法详解

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

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

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

border: 3px solid; 

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

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

何时使用 border？

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

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

outline: solid; 

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

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

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

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

何时使用 outline？

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

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!