CSS 边框

使用 CSS 设置边框样式

学习如何为 HTML 元素添加和自定义边框。

CSS 边框属性 CSS 边框属性允许您控制元素的边框样式、宽度和颜色。

边框样式：`border-style`

border-style 属性是使任何边框可见的必需属性。它定义了绘制的线条类型。

常见的 border-style 值包括：

solid：一条实线。
dotted：一系列点。
dashed：一系列短划线。
double：两条平行的实线。border-width 定义总宽度，包括线条之间的空间。
groove、ridge、inset、outset：3D 效果边框（外观取决于 border-color）。在现代扁平化设计趋势中较少使用。
none：无边框（默认值）。
hidden：与 none 相同，但在表格中的边框冲突解决方面有特殊含义。

/* 您必须设置 border-style，其他边框属性才能生效 */
.box {
  border-style: solid;
}

边框宽度：`border-width`

border-width 属性设置边框的粗细。

它接受长度值（例如，px、em、rem）或预定义关键词：thin（细）、medium（中）、thick（粗）。

请记住：如果没有设置 border-style 为 none 或 hidden 以外的值，border-width 将不会产生效果。

.card {
  border-style: solid;
  border-width: 2px; /* 常用像素值 */
}

.separator {
  border-style: dashed;
  border-width: thin; /* 预定义关键词 */
}

.important-section {
    border-style: double;
    border-width: 0.5rem; /* 使用相对单位 */
}

边框颜色：`border-color`

border-color 属性设置边框的颜色。

您可以使用任何有效的 CSS 颜色格式（HEX、RGB/RGBA、HSL/HSLA、颜色名称）。也可以使用关键词 transparent（透明）。

如果未明确设置 border-color，边框通常会继承元素的 color（文本颜色）属性。

同样，这要求设置 border-style。

.alert-box {
  border-style: solid;
  border-width: 1px;
  border-color: red; /* 使用颜色名称 */
}

.subtle-highlight {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc; /* 使用 HEX */
}

.interactive-element {
    border-style: solid;
    border-width: 2px;
    border-color: hsl(200, 80%, 50%); /* 使用 HSL */
}

单独设置各边边框

您可以使用特定属性单独设置每个边（上、右、下、左）的样式：

border-top-style、border-right-style、border-bottom-style、border-left-style
border-top-width、border-right-width、border-bottom-width、border-left-width
border-top-color、border-right-color、border-bottom-color、border-left-color

/* 示例：仅使用下边框实现下划线效果 */
.section-title {
  padding-bottom: 0.5em; /* 文本和边框之间的空间 */
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-bottom-color: cornflowerblue;
}

您还可以使用 border-style、border-width 和 border-color 的缩写形式一次设置多个边，使用 1、2、3 或 4 个值（类似于 margin 或 padding）：

/* 两个值：上/下，左/右 */
.special-box {
  border-style: solid dotted;
  border-width: 2px 5px;
  border-color: red blue;
}

/* 四个值：上，右，下，左 */
.complex-box {
  border-style: solid dashed dotted double;
  border-width: 1px 2px 3px 4px;
  border-color: red green blue yellow;
}

边框缩写属性：`border`

为了简化代码，border 缩写属性在一个声明中设置了所有四个边的 border-width、border-style 和 border-color。

顺序通常无关紧要，但常见的约定是 width style color。

/* 常见用法 */
.button {
  border: 1px solid #999;
}

/* 更复杂的示例 */
.fancy-border {
  border: thick dashed green;
}

您还可以使用 border-top、border-right、border-bottom 和 border-left 等缩写形式设置单独的边：

.header {
  border-bottom: 2px solid #eee;
}

.sidebar {
    border-left: 1px dotted rgba(0,0,0,0.2);
}

附加边框特性：`border-radius`

一个与边框属性非常常用的属性是 border-radius，它允许您创建圆角。

.rounded-box {
  border: 1px solid #aaa;
  padding: 1em;
  border-radius: 8px; /* 应用于所有角 */
}

.pill-button {
    border: 1px solid transparent;
    background-color: blue;
    color: white;
    padding: 0.5em 1.5em;
    /* 大半径创建药丸形状 */
    border-radius: 999px;
}

您可以为每个角指定不同的半径。在 MDN 上探索 border-radius 的更多用法。

所有 CSS 边框属性参考

属性	描述
`border`	`border-width`、`border-style`、`border-color` 的缩写形式（所有边）。
`border-width`	设置所有四边宽度的缩写形式。
`border-style`	设置所有四边样式的缩写形式（必需）。
`border-color`	设置所有四边颜色的缩写形式。
`border-top`、`-right`、`-bottom`、`-left`	特定边（宽、样、色）的缩写形式。
`border-top-width` 等	设置特定边的宽度。
`border-top-style` 等	设置特定边的样式。
`border-top-color` 等	设置特定边的颜色。
`border-radius`	设置元素角的圆角半径。
`border-image`	允许使用图像作为边框（高级用法）。
`border-collapse`	用于表格，指定边框是合并为单个边框还是保持分离。
`border-spacing`	与 `border-collapse: separate` 一起用于表格，指定单元格边框之间的距离。

CSS 边框

使用 CSS 设置边框样式

边框样式：border-style

边框宽度：border-width

边框颜色：border-color