css虚线怎么制作

使用 border-style 属性

通过设置 border-style: dashed 可以直接生成虚线边框。示例代码如下：

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

自定义虚线样式

若需调整虚线的间隔或线段长度，可通过 border-image 或 background 实现。以下是一个使用 background 的示例：

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

使用 SVG 绘制虚线

通过 SVG 的 stroke-dasharray 属性可以精确控制虚线的样式。示例：

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

伪元素生成虚线

利用 ::before 或 ::after 伪元素结合 background 实现虚线效果：

.element::after {
  content: "";
  display: block;
  height: 1px;
  background: repeating-linear-gradient(to right, #000, #000 5px, transparent 5px, transparent 10px);
}

兼容性注意事项

border-style: dashed 在不同浏览器中渲染效果可能不一致。如需精确控制，推荐使用 background 或 SVG 方案。