css制作虚线

使用 border-style 属性

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

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

自定义虚线样式

如果需要更灵活的虚线样式，可以使用 border-image 结合 SVG 或线性渐变实现。这种方法允许控制虚线的间距和大小。

.element {
  border: 2px dashed transparent;
  border-image: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 10px) 10;
}

使用伪元素绘制虚线

通过伪元素（如 ::before 或 ::after）和背景渐变，可以绘制自定义的虚线效果，适用于非边框场景。

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

虚线表格边框

为表格单元格设置虚线边框时，直接使用 border-style: dashed 可能不够美观，可以通过调整单元格间距和边框属性优化显示效果。

table {
  border-collapse: separate;
  border-spacing: 0;
}
td {
  border: 1px dashed #999;
  padding: 8px;
}

虚线分隔线

在文本或布局中插入虚线分隔线，可以使用 <hr> 标签结合 CSS 的 border 属性实现。

hr {
  border: none;
  border-top: 1px dashed #ccc;
  margin: 20px 0;
}

以上方法覆盖了常见的虚线应用场景，从简单的边框到复杂的自定义样式，可根据需求选择合适的方式。