css里如何设置虚线位置,css里的虚线怎么调节宽度

需求

浏览器提供的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 { 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}