线性渐变 - 画一条垂直虚线

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;
}

如果你想要褪色，你可以结合 linear-gradient:

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;
}

Answer 2

您需要使用渐变中的位置来创建虚线，然后将包含虚线的元素定位到您想要的位置。

在这种情况下，我使用 pseudo 元素作为行 "container" 并将其定位在距离左边缘 80% 的绝对位置。

更改元素大小(width/height)以修改线宽。

background-size改短划线size/spacing

.content {
  width: 400px;
  height: 150px;
  padding: 5px;
  background-color: #ddd;
  position: relative;
}
.content:before {
  content: '';
  position: absolute;
  top:70%;
  left:0;
  right:0;
  height: 1px;
  background-image: linear-gradient(90deg, #000, #000 75%, transparent 75%, transparent 100%);
  background-size: 10px 1px;
}
.content:after {
  content: '';
  position: absolute;
  top:0;
  left:80%;
  bottom:0;
  width: 5px;
  background-image: linear-gradient(0deg, orange, orange 75%, transparent 75%, transparent 100%);
  background-size: 1px 20px;
}

<div class="content">
  :before = horizontal line<br />
  :after = vertical line
</div>

线性渐变 - 画一条垂直虚线

Linear-gradient - Make A Dashed Vertical Line

css

linear-gradients