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

Answer 2

您需要使用渐变中的位置创建虚线，然后将包含该线的元素放置在所需的位置。

在这种情况下，我将pseudo元素用作“容器”行，并将其绝对定位在距左边缘80％的位置。

更改元素大小（宽度/高度）以修改线宽。

background-size更改破折号大小/间距

.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>

线性渐变-绘制垂直虚线

2 个答案: