css 虚线

/* 使用 CSS 创建虚线边框的示例 */

/* 1. 单一边框的虚线 */
.box {
  border: 2px dashed black; /* 虚线边框，宽度为2px，颜色为黑色 */
}

/* 2. 只设置某一边的虚线边框 */
.top-dashed {
  border-top: 2px dashed red; /* 仅顶部为虚线边框，宽度为2px，颜色为红色 */
}

.left-dashed {
  border-left: 2px dashed blue; /* 仅左边为虚线边框，宽度为2px，颜色为蓝色 */
}

.right-dashed {
  border-right: 2px dashed green; /* 仅右边为虚线边框，宽度为2px，颜色为绿色 */
}

.bottom-dashed {
  border-bottom: 2px dashed orange; /* 仅底部为虚线边框，宽度为2px，颜色为橙色 */
}

/* 3. 使用多个属性分别定义 */
.dashed-border {
  border-style: dashed; /* 边框样式为虚线 */
  border-width: 3px;    /* 边框宽度为3px */
  border-color: purple; /* 边框颜色为紫色 */
}

解释说明：

• border 属性可以一次性设置边框的样式、宽度和颜色。dashed 是虚线样式的关键词。
• border-top, border-left, border-right, 和 border-bottom 分别用于设置单独一侧的边框。
• border-style, border-width, 和 border-color 可以分开定义，适用于需要更灵活控制的情况。