CSS小技巧——画出可以自己调整间距长度的虚线/border dashed/linear-gradient

需求

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