盒子模型与div标签、边框属性

在CSS中，div标签的边框属性是用来定义盒子模型的边界，这些属性包括边框的样式、宽度、颜色以及位置。通过这些属性，你可以控制div元素的外观，使其与其他元素区分。

边框样式属性

border-style属性用于定义边框的样式，它的常见值包括：

• none：没有边框，即忽略所有边框的宽度（默认值）
• solid：边框为单实线
• dashed：边框为虚线
• dotted：边框为点线
• double：边框为双实线

例如，如果你想将div元素的边框设置为双实线，你可以使用以下CSS代码：

​
border-style: double;

​

边框宽度属性

border-width属性用于设置边框的宽度，其常用取值单位为像素（px）。你可以分别为每一条边设置宽度，或者一次性设置所有边的宽度。例如：

​
border-width: 5px; /* 四边宽度均为5像素 */
border-width: 5px 3px; /* 上边框宽度5像素，下边框宽度3像素 */

​

边框颜色属性

border-color属性用于设置边框的颜色。你可以使用预定义的颜色名称（如red、blue）、十六进制颜色值（如#FF0000）或RGB颜色值（如rgb(255, 0, 0)）来定义颜色。例如：

​
border-color: blue; /* 所有边框颜色为蓝色 */
border-color: blue green; /* 上边框蓝色，下边框绿色 */

​

综合设置边框

除了单独设置边框的样式、宽度和颜色，你还可以使用border属性一次性设置所有边框的样式。例如，要将div元素的边框设置为3像素宽、单实线、黑色，你可以使用以下CSS代码：

​
border: 3px solid black;

​

注意事项

• 在设置边框颜色时，必须同时设置边框样式，否则颜色设置将无效。
• 使用RGB颜色值时，如果括号里的数值为百分比，必须加上百分号，写作"0%"。