CSS 边框 Border

Begindev 编辑部 March 25, 2026

边框不仅定义了元素的边缘，有助于整体布局，而且还是吸引注意力、创建层次结构和强化网站视觉识别的强大工具。

本章节将深入探讨控制边框外观的各种属性，让你能够创建既美观又实用的设计。

1. 理解 CSS 边框属性

CSS 的 border 属性实际上是一个简写属性，用于设置三个独立的边框属性：border-width（宽度）、border-style（样式）和 border-color（颜色）。虽然你可以单独设置这些属性，但使用简写通常更简洁。

1.1 边框宽度 (Border Width)

border-width 属性设置元素边框的粗细。它接受像素 (px)、点 (pt)、ems (em) 或其他标准 CSS 单位。你可以使用 border-top-width、border-right-width、border-bottom-width 和 border-left-width 属性为边框的每一侧设置不同的宽度。

示例：

.example {
  border-width: 2px; /* 所有边均为 2px */
}

.example-sides {
  border-top-width: 1px;
  border-right-width: 3px;
  border-bottom-width: 5px;
  border-left-width: 3px;
}

.example-shorthand {
    border-width: 1px 3px 5px; /* 上 1px, 左 & 右 3px, 下 5px */
}

.example-all-shorthand {
    border-width: 1px 3px 5px 7px; /* 上、右、下、左 */
}

此外，你可以使用关键字 thin（细）、medium（中等）和 thick（粗），但它们的具体像素值因浏览器而异，因此不够精确。

1.2 边框样式 (Border Style)

border-style 属性指定边框的外观。有多个值可用：

solid：一条连续的实线。
dashed：一系列短的、方形边缘的虚线。
dotted：一系列圆点。
double：两条平行的实线。border-width 决定了两条线加在一起的总粗细。
groove：模拟雕刻的凹槽效果。
ridge：与 groove 相反，产生凸起的脊状效果。
inset：使整个盒子看起来像是嵌入在页面中。
outset：使整个盒子看起来像是从页面中凸起。
none：不显示边框。注意：如果你不指定边框样式，即使你设置了宽度和颜色，边框也不会显示。
hidden：类似于 none，但在表格中用于解决边框冲突。

就像 border-width 一样，你可以使用 border-top-style、border-right-style 等属性为边框的每一侧指定不同的样式。简写形式在这里同样适用（一个值代表所有四边，两个值代表上下和左右，以此类推）。

示例：

.solid {
  border-style: solid;  /* 实线 */
}
.dashed {
  border-style: dashed; /* 虚线 */
}
.dotted {
  border-style: dotted; /* 点状线 */
}
.double {
  border-style: double; /* 双实线 */
}
.mixed {
  border-top-style: solid;    /* 上：实线 */
  border-right-style: dashed; /* 右：虚线 */
  border-bottom-style: dotted;/* 下：点状线 */
  border-left-style: double;  /* 左：双实线 */
}

1.3 边框颜色 (Border Color)

border-color 属性用于设置边框的颜色。你可以使用任何有效的 CSS 颜色值，包括命名颜色、十六进制值、rgb()、rgba()、hsl() 和 hsla()。

与 border-width 和 border-style 类似，你可以使用 border-top-color、border-right-color 等属性为边框的每一侧设置不同的颜色。简写形式在这里同样适用。如果未指定 border-color，边框将继承元素的 color 属性值（即文本颜色）。

示例：

.red-border {
  border-color: red;
}
.hex-border {
  border-color: #00FF00; /* 绿色 */
}
.rgba-border {
  border-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
}
.multi-color {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

2. 边框简写属性 (Border Shorthand)

border 属性将 border-width、border-style 和 border-color 合并为一个声明。值的顺序并不重要，但通常建议遵循 width style color 的顺序。

重要：border-style 是必须的；如果你省略了 border-width 或 border-color，它们将使用默认值（宽度默认为 medium，颜色默认为文本颜色）。

示例：

.shorthand {
  border: 2px solid black; /* 2px 宽，实线，黑色边框 */
}
.shorthand-missing-width {
  border: solid red; /* 中等宽度，实线，红色边框 */
}

你也可以针对单独的一边使用简写：

.top-border {
  border-top: 5px dashed purple; /* 仅上边框 */
}

3. 使用 `border-radius` 创建圆角

border-radius 属性用于让边框的角变圆。这是创建柔和、现代设计的强大工具。

3.1 单值语法

一个值会将所有四个角变成相同的圆角。

.rounded {
  border-radius: 10px; /* 所有角都变成 10px 的圆角 */
}
.circle {
  border-radius: 50%; /* 如果元素是正方形，这将创建一个完美的圆形 */
  width: 100px;
  height: 100px;
}

3.2 多值语法

你可以指定最多四个值来分别控制每个角：

两个值：第一个值应用于左上和右下角，第二个值应用于右上和左下角。（即对角线相同）
三个值：第一个值应用于左上角，第二个值应用于右上和左下角，第三个值应用于右下角。
四个值：值依次应用于左上、右上、右下和左下角（顺时针方向）。

.rounded-corners {
  /* 左上, 右上, 右下, 左下 */
  border-radius: 10px 5px 20px 0;
}

.rounded-corners-2 {
  /* 左上 & 右下 = 10px, 右上 & 左下 = 5px */
  border-radius: 10px 5px;
}

.rounded-corners-3 {
  /* 左上 = 10px, 右上 & 左下 = 5px, 右下 = 20px */
  border-radius: 10px 5px 20px;
}

3.3 非简写属性

为了进行更精细的控制，你可以使用非简写属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

这些属性允许你为每个角指定不同的水平和垂直半径，从而创建椭圆形的角。

示例：

.elliptical {
  border-top-left-radius: 20px 5px; /* 水平半径 20px，垂直半径 5px */
  border-top-right-radius: 5px 20px;
  border-bottom-right-radius: 20px 5px;
  border-bottom-left-radius: 5px 20px;
}

4. 实战示例与演示

让我们看一些如何使用边框样式来增强网页视觉吸引力的实际例子：

4.1 号召性用语 (CTA) 按钮

使用实线边框定义按钮边界，使用 border-radius 柔化角落。

.button {
  background-color: #4CAF50; /* 绿色 */
  border: 2px solid green;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}
.button:hover {
  border-color: darkgreen; /* 悬停时加深边框颜色 */
}

4.2 警告框 (Alert Boxes)

使用不同的边框颜色来指示消息的严重性。

.alert {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid;
  border-radius: 5px;
}
.alert-error {
  border-color: red; /* 错误框为红色 */
  color: red;
}
.alert-warning {
  border-color: orange;
  color: orange;
}
.alert-success {
  border-color: green; /* 成功框为绿色 */
  color: green;
}

4.3 表单输入框

使用自定义边框增强表单输入字段的外观。使用 :focus 伪类在输入框被激活时改变边框颜色，提供视觉反馈。

input[type="text"],
input[type="email"],
textarea {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  
  /* 确保内边距和边框包含在元素的总宽度和高度中 */
  box-sizing: border-box; 
  
  margin-bottom: 10px;
  
  /* 使输入框填满其容器的宽度 */
  width: 100%; 
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  /* 聚焦时加深边框颜色 */
  border-color: #555; 
  
  /* 移除默认的聚焦轮廓线 */
  outline: none; 
}

4.4 图片边框

为图片添加细微的边框，将其与背景区分开来，从而营造出相框的效果。使用不同的边框样式来打造不同的外观。

.image-frame {
  border: 1px solid #ccc; /* 1像素实线灰色边框 */
  padding: 5px;           /* 内边距（产生留白） */
  border-radius: 3px;     /* 轻微圆角 */
}

1. 理解 CSS 边框属性

1.1 边框宽度 (Border Width)

1.2 边框样式 (Border Style)

1.3 边框颜色 (Border Color)

2. 边框简写属性 (Border Shorthand)

3. 使用 border-radius 创建圆角

3.1 单值语法

3.2 多值语法

3.3 非简写属性

4. 实战示例与演示

4.1 号召性用语 (CTA) 按钮

4.2 警告框 (Alert Boxes)

4.3 表单输入框

4.4 图片边框

3. 使用 `border-radius` 创建圆角