css边框

/* 示例代码：设置一个简单的 CSS 边框 */

/* 1. 使用单个属性设置边框 */
.box {
    border: 2px solid black; /* 设置边框宽度为2px，样式为实线，颜色为黑色 */
}

/* 2. 分别设置边框的宽度、样式和颜色 */
.box-separate {
    border-width: 3px; /* 边框宽度为3px */
    border-style: dashed; /* 边框样式为虚线 */
    border-color: red; /* 边框颜色为红色 */
}

/* 3. 只设置特定方向的边框 */
.top-border {
    border-top: 4px double blue; /* 只设置顶部边框，宽度为4px，样式为双线，颜色为蓝色 */
}

.left-border {
    border-left: 5px dotted green; /* 只设置左边边框，宽度为5px，样式为点线，颜色为绿色 */
}

/* 4. 圆角边框 */
.rounded-border {
    border: 2px solid purple;
    border-radius: 10px; /* 设置圆角半径为10px */
}

解释说明：

• border 属性是一个简写属性，可以同时设置边框的宽度、样式和颜色。
• border-width、border-style 和 border-color 是单独设置边框的宽度、样式和颜色的属性。
• 可以使用 border-top、border-right、border-bottom 和 border-left 来分别设置不同方向的边框。
• border-radius 属性用于设置圆角边框，使边框的四个角变成圆角。