css 制作虚线框

使用 border-style 属性

在 CSS 中，可以通过 border-style 属性设置边框为虚线样式。将 border-style 的值设为 dashed 即可创建虚线边框。示例代码如下：

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

自定义虚线样式

如果需要更灵活地控制虚线的样式，可以使用 border-image 属性结合 SVG 或线性渐变生成自定义虚线效果。以下是一个使用线性渐变的示例：

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

使用伪元素实现虚线框

通过伪元素（如 ::before 或 ::after）可以更精细地控制虚线框的位置和样式。以下是一个示例：

.pseudo-dashed-border {
  position: relative;
  padding: 10px;
}
.pseudo-dashed-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed #000;
  pointer-events: none;
}

调整虚线间隔

通过 border-spacing 或 stroke-dasharray（SVG）可以调整虚线的间隔。以下是使用 stroke-dasharray 的 SVG 示例：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="80" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="5,5" />
</svg>

兼容性注意事项

border-image 和 SVG 方法在现代浏览器中支持良好，但在旧版本浏览器（如 IE 11）中可能需要回退方案。border-style: dashed 是最通用的方法，但样式可能因浏览器而异。