线性渐变 - 制作垂直虚线

Question

所以，我已经四处寻找并尝试了几件事，但我只是想创建一条垂直虚线。类似于如果你做了边框虚线。

我得到的关闭：

background: linear-gradient(transparent, #ffffff) no-repeat 80%/2px 100%, linear-gradient(#000, #000) no-repeat 80%/2px 100%;

JSFiddle：https ://jsfiddle.net/m9wtrdgz/

是的，我希望这条线位于 80% 的位置；]

Answer 1

您正在寻找一个repeating-linear-gradient：

body {
  margin:0;
  height:100vh;
  background:
    repeating-linear-gradient(to bottom,transparent 0 4px,black 4px 8px) 80%/2px 100% no-repeat;
}

如果你想要一个褪色的颜色，你可以结合一个线性渐变：

body {
  margin:0;
  height:100vh;
  background:
    repeating-linear-gradient(to bottom,transparent 0 4px,#fff 4px 8px),
    linear-gradient(to bottom,black,transparent);
  background-size:2px 100%;
  background-position:80%;
  background-repeat:no-repeat;
}