css 制作虚线

使用 border-style 属性

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

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

调整虚线的间隔和宽度

如果需要自定义虚线的间隔或宽度，可以使用 border-image 属性结合线性渐变。

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

使用 background 属性模拟虚线

对于非边框场景（如分割线），可以通过 background 和 linear-gradient 模拟虚线效果。

.divider {
  height: 1px;
  background: repeating-linear-gradient(to right, #000 0%, #000 50%, transparent 50%, transparent 100%);
  background-size: 10px 1px;
}

控制虚线的方向

通过调整渐变方向（如 to right、to bottom），可以创建水平或垂直虚线。

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

兼容性提示

border-image 方案在旧版浏览器（如 IE11）可能不支持，此时需回退到 border-style: dashed 或使用 SVG 替代方案。