CSS Border（边框）

边框（border） 是围绕在元素「内边距」外侧的一圈线，用来分隔、强调或装饰元素。可以分别设置四条边的宽度、样式和颜色。

边框的三要素

每条边由三部分组成：

1. border-width：边框宽度（如 1px、2px）
2. border-style：边框样式（实线、虚线、无等）
3. border-color：边框颜色

---

1. border-width（宽度）

.box {
  border-width: 2px;           /* 四边都是 2px */
  border-width: 1px 3px;      /* 上下 1px，左右 3px */
  border-width: 1px 2px 3px 4px;  /* 上 右 下 左（顺时针） */
}

也可单独设某一边：border-top-width、border-right-width、border-bottom-width、border-left-width。

---

2. border-style（样式）

必写：若只写 border-width 和 border-color 而不写 border-style，边框不会显示。默认是 none。

.box {
  border-style: solid;   /* 实线（最常用） */
}

.dashed {
  border-style: dashed;  /* 虚线 */
}

.dotted {
  border-style: dotted;  /* 点线 */
}

.double {
  border-style: double;  /* 双线 */
}

.none {
  border-style: none;    /* 无边框 */
}

同样支持 1～4 个值的简写（上、右、下、左），以及单边属性：border-top-style 等。

---

3. border-color（颜色）

.box {
  border-color: #333;
  border-color: red blue;        /* 上下 red，左右 blue */
  border-color: red green blue black;  /* 上 右 下 左 */
}

单边：border-top-color、border-right-color 等。

---

4. border 简写（单边）

一条声明写完整一条边的 width、style、color：

.box {
  border: 2px solid #333;       /* 四边相同 */
}

.box {
  border-top: 1px solid red;
  border-bottom: 3px dashed blue;
}

顺序：宽度 样式 颜色，任意一个可省略（但若只写一个，一般是 style，因为 width 默认 medium，color 默认当前文字颜色）。

---

单边简写

• border-top
• border-right
• border-bottom
• border-left

用法同 border，例如：border-left: 4px solid #0066cc;。

---

圆角：border-radius

虽然名字带 border，但 border-radius 是让盒子角变圆，不一定要有边框：

.box {
  border-radius: 8px;      /* 四角相同 */
  border-radius: 50%;     /* 圆形（需宽高相等） */
  border-radius: 10px 20px 30px 40px;  /* 左上 右上 右下 左下 */
}

---

小结

• 边框三要素：width、style、color；style 必写，否则不显示。
• 简写：border: 宽度 样式 颜色；单边用 border-top 等。
• 圆角：border-radius，与是否设 border 无关。

下一节学习 CSS 轮廓（outline）：与边框类似但不计入布局的「外圈线」。