border

2025年01月04日

柏拉文

越努力，越幸运

一、认识

---

CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color。

二、构成

---

border 属性为下列 CSS 属性的简写属性：

• border-width

• border-style

• border-color

三、语法

---

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  

/* 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: unset;

四、对比

---

4.1 border vs outlines

边界（border） 和 轮廓（outline） 很相似。然而轮廓在以下方面与边界不同：

• 轮廓不占据空间，他们在元素内容之外绘制。

• 根据规范，轮廓不必为矩形，尽管通常是矩形。