css制作虚线

使用 border-style 属性

在CSS中，可以通过 border-style 属性设置边框为虚线样式。将 border-style 的值设为 dashed 即可实现虚线边框效果。例如：

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

自定义虚线样式

如果需要更灵活的虚线样式（如调整虚线的长度和间距），可以使用 border-image 结合 SVG 或线性渐变。以下是一个使用线性渐变的例子：

.custom-dashed-border {
  border: 2px solid transparent;
  border-image: repeating-linear-gradient(45deg, #000, #000 4px, transparent 4px, transparent 8px) 10;
}

使用 background 模拟虚线

对于非边框的虚线（如下划线或分割线），可以通过 background 属性配合线性渐变实现：

.dashed-line {
  height: 1px;
  background: repeating-linear-gradient(to right, #000, #000 5px, transparent 5px, transparent 10px);
}

调整虚线的方向和形状

通过修改 repeating-linear-gradient 的角度参数，可以创建水平、垂直或斜向的虚线。例如，垂直虚线：

.vertical-dashed-line {
  width: 1px;
  background: repeating-linear-gradient(to bottom, #000, #000 5px, transparent 5px, transparent 10px);
}

兼容性注意事项

border-image 和 repeating-linear-gradient 在现代浏览器中支持良好，但在旧版本浏览器（如IE11以下）可能不兼容。若需兼容旧浏览器，建议使用 border-style: dashed 作为降级方案。