HTML 中的边框

在 HTML 中，边框是元素的可见部分之外的一条线。边框可以使用 CSS 样式来定义其线条宽度、颜色、样式和圆角等属性。

实现边框

要实现边框，可以使用 CSS 样式的 border 属性。border 属性基本上由三个属性值组成，分别是线条宽度、线条样式和线条颜色。

线条宽度

border-width 属性可以用来控制边框线条的宽度。它接受一个长度值，可以是像素、em、百分比等任何长度单位。在 CSS 中，边框宽度有四个值，分别对应左、上、右、下四条边。如果只希望定义一条边的宽度，则可以使用类似 border-top-width 的属性。

以下是一个例子：

div {
  border-width: 2px;
}

线条样式

border-style 属性可以用来控制边框的样式，包括实线、虚线、点线、双线等。在 CSS 中，线条样式有八种，分别是：

• solid（实线）
• dashed（虚线）
• dotted（点线）
• double（双线）
• groove（3D凸起）
• ridge（3D凹陷）
• inset（3D凹边）
• outset（3D凸边）

以下是一个例子：

div {
  border-style: dashed;
}

线条颜色

border-color 属性可以用来控制边框的颜色。它接受一个颜色值，可以是RGB、十六进制、颜色名等。与 border-width 一样，border-color 有四个值，分别对应左、上、右、下四条边。如果只希望定义一条边的颜色，则可以使用类似 border-top-color 的属性。

以下是一个例子：

div {
  border-color: red;
}

组合属性

CSS 还提供了一个方便的属性来定义边框，那就是 border 属性，它可以一次性定义所有的边框属性。

div {
  border: 2px solid red;
}

上面的例子将同时定义边框的宽度、样式和颜色。如果希望使用不同的样式和颜色来定义每条边框，可以像下面这样使用 border-top、border-right、border-bottom 和 border-left 属性：

div {
  border-top: 2px dashed red;
  border-right: 3px solid blue;
  border-bottom: 1px dotted green;
  border-left: 4px double yellow;
}

圆角边框

CSS 还提供了一个属性来定义圆角边框，即 border-radius 属性。border-radius 属性接受一个长度值，可以是像素、em、百分比等长度单位。

div {
  border-radius: 10px;
}

上面的例子将把边框线条的四个角变为圆角。

总结

边框是网页设计中必不可少的一部分。在使用 HTML 和 CSS 制作网页时，掌握边框的基本属性是非常重要的。除了上面介绍的属性，还有其他一些属性可以用来定义边框，例如 border-image 等。如果想要深入学习边框的知识，可以从以下链接中获取更多信息：

• CSS 3 边框属性
• CSS Border 基础