css 虚线边框

/* 使用 CSS 创建虚线边框 */

/* 1. 单一边框的虚线样式 */
.dashed-border {
    border: 2px dashed #000; /* 设置边框为2像素宽，虚线样式，颜色为黑色 */
}

/* 2. 不同方向的虚线边框 */
.dashed-border-top {
    border-top: 2px dashed #000; /* 只设置顶部边框为虚线 */
}

.dashed-border-right {
    border-right: 2px dashed #000; /* 只设置右边边框为虚线 */
}

.dashed-border-bottom {
    border-bottom: 2px dashed #000; /* 只设置底部边框为虚线 */
}

.dashed-border-left {
    border-left: 2px dashed #000; /* 只设置左边边框为虚线 */
}

/* 3. 多种样式的组合 */
.complex-dashed-border {
    border-style: dashed solid double dotted; /* 分别设置四个边框的样式：上虚线、右实线、下双线、左点线 */
    border-width: 2px; /* 边框宽度统一为2像素 */
    border-color: red green blue yellow; /* 分别设置四个边框的颜色 */
}

解释说明：

• border 属性可以同时设置边框的宽度、样式和颜色。其中 dashed 表示虚线样式。
• border-top, border-right, border-bottom, border-left 分别用于单独设置每个方向的边框样式。
• border-style, border-width, border-color 可以分别控制边框的样式、宽度和颜色，并且可以对四个边框进行不同的设置。