边框

此属性是以下 CSS 属性的速记

• border-width
• border-style
• border-color

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;

border 属性可以使用下面列出的一个、两个或三个值来指定。值的顺序无关紧要。

<line-width>

设置边框的粗细。如果不存在，则默认为 medium。请参阅 border-width。

<line-style>

设置边框的样式。如果不存在，则默认为 none。请参阅 border-style。

<color>

设置边框的颜色。如果不存在，则默认为 currentcolor。请参阅 border-color。

与所有速记属性一样，任何省略的子值都将设置为其 初始值。重要的是，border 不能用于为 border-image 指定自定义值，而是将其设置为其初始值，即 none。

border 速记在您希望所有四个边框都相同的情况下特别有用。但是，要使它们彼此不同，您可以使用长格式的 border-width、border-style 和 border-color 属性，这些属性接受每侧不同的值。或者，您可以使用物理（例如 border-top）和逻辑（例如 border-block-start）边框属性一次定位一个边框。

边框和 轮廓 非常相似。但是，轮廓在以下方面与边框不同

• 轮廓永远不会占用空间，因为它们绘制在元素内容的外部。
• 根据规范，轮廓不必是矩形，尽管它们通常是矩形。

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

HTML

<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

CSS

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

结果

• border-width
• border-style
• border-color
• outline
• 背景和边框
• 学习 CSS：背景和边框