使用 svg 实现自定义虚线边框
如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片，但是这种方法存在引入外部资源、性能低下的缺点。
为了避免上述问题，可以使用 svg（可缩放矢量图形）来创建纯代码实现。一种方法是使用 svg 的 <line> 元素。如下所示：
<svg viewbox="0 0 100 1"> <line x1="0" y1="0.5" x2="8" y2="0.5" stroke-width="8" stroke="#000" stroke-linecap="round" /> <line x1="10" y1="0.5" x2="18" y2="0.5" stroke-width="8" stroke="#000" stroke-linecap="round" /> <!-- 省略其他线段... --> </svg>
通过设置 stroke-width 和 stroke-linecap 属性，可以控制线段的宽度和圆角半径。使用 viewbox 属性可以指定 svg 的尺寸。
将此 svg 嵌入到 html 中，可以轻松实现一个自定义虚线边框。例如：
<div class="container"> <svg class="border" viewbox="0 0 100 1">...</svg> </div>
.container {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.border {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} 
