CSS⼩技巧——画出可以⾃⼰调整间距长度的虚线borderdashedlinear-gra。。
。
需求
浏览器提供的dashed border画出来⼀直是⼀个样式，不能个性化定制虚线的长度以及间距，所以⽤这个⽅法画出可个性化定制的虚线。
实现
background-image:linear-gradient(to bottom, red 0%, red 80%, transparent 50%);
background-size: 3px 18px;
background-repeat: y-repeat
background-image中，linear-gradient的第三个参数可以调整虚线每⼀段的长度显⽰百分⽐，结合background-size的第⼆个值（可设置虚线每⼀段总长度）使⽤。两者结合就可以调整虚线每⼀段之间的间距⼤⼩。
background-size的第⼀个值可以调整虚线的宽度。（可以设为100%，直接继承元素的宽度width）
案例
右边蓝⾊的是浏览器⾃带的border样式，左边红⾊的是⾃⼰画出来的。
html
<div class="box">
<div class="line"></div>
</div>
css
.box{
div border属性width: 200px;
height: 600px;
background:rgba(255,99,71, .1);
padding-right: 20px;
border-right: 3px dashed blue;
position: relative;
}
.line{
position: absolute;
right: 10px;
width: 3px;
height: 100%;
background-image:linear-gradient(to bottom, red 0%, red 80%, transparent 50%);
background-size: 100% 18px;
background-repeat: repeat-y
}