css盒子模型——边框 border

一、概述

CSS盒子模型的边框（border）是指围绕着元素内容和内边距的一条或多条线，用于装饰和界定元素的范围。

border属性包括3个子属性：border-width、border-style、border-color。分别表示边框的宽度、样式和颜色。

二、border-width

其中，border-width属性可以设置边框的粗细程度，可以使用像素、em、rem等单位进行设置。

示例：

border-width: 1px; /* 1像素宽度的边框 */
border-width: 2em; /* 2em宽度的边框 */
border-width: 0.5rem; /* 0.5rem宽度的边框 */

三、border-style

border-style属性可以设置边框的样式，常用的样式包括：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。

示例：

border-style: solid; /* 实线边框 */
border-style: dashed; /* 虚线边框 */
border-style: dotted; /* 点线边框 */
border-style: double; /* 双线边框 */

四、border-color

border-color属性可以设置边框的颜色，可以使用颜色值或者rgb、rgba等颜色描述方式进行设置。

示例：

border-color: #000; /* 黑色边框 */
border-color: red; /* 红色边框 */
border-color: r