css制作虚线

使用 border-style 属性

在 CSS 中，可以通过 border-style 属性设置边框为虚线样式。将 border-style 设置为 dashed 即可创建虚线边框。

.element {
  border: 2px dashed #000;
}

自定义虚线样式

如果需要更灵活地控制虚线的间隔和长度，可以使用 border-image 或 background 属性模拟虚线效果。

.element {
  background: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  height: 2px;
}

使用 SVG 绘制虚线

SVG 提供了更精确的虚线控制，通过 stroke-dasharray 属性可以定义虚线的模式和间隔。

<svg width="200" height="2">
  <line x1="0" y1="1" x2="200" y2="1" stroke="#000" stroke-dasharray="5,5" />
</svg>

结合伪元素创建虚线

通过 ::before 或 ::after 伪元素，可以动态生成虚线效果，适用于复杂布局。

.element::after {
  content: "";
  display: block;
  border-top: 2px dashed #000;
  width: 100%;
}

调整虚线的颜色和粗细

虚线的颜色和粗细可以通过 border-color 和 border-width 调整，与其他边框属性类似。

.element {
  border: 3px dashed #ff0000;
}