如何用css渐变绘制垂直虚线和实线

Question

如何制作带有 90 度线的 CSS 背景渐变。应该从无线开始，然后是一条实线，接下来的 3 条虚线。

Answer 1

你可以像下面这样做：

.box {
  --c: #000; /* color */
  --t: 2px; /* thickness */
  --g: 40px; /* gap */
  --d: 10px; /* control the dashes */
 
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) 0/ calc(4*var(--g)) 100%,
    repeating-linear-gradient(90deg,#0000 0 var(--t),#fff 0 var(--g)),
    linear-gradient(var(--c) 50%,#0000 0) 0/100% var(--d);

  background-clip: padding-box;
  min-height: 100vh;
  border: solid #0000;
  border-width: 0 var(--g);
}


body {
  margin:0;
}

<div class="box"></div>

透明度如下：

.box {
  --c: #000; /* color */
  --t: 2px; /* thickness */
  --g: 40px; /* gap */
  --d: 10px; /* control the dashes */
 
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) 0/calc(4*var(--g)) 100%,
    conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 0) 0/var(--g) var(--d);

  background-clip: padding-box;
  min-height: 100vh;
  border: solid #0000;
  border-width: 0 var(--g);
}


body {
  margin:0;
  background: linear-gradient(pink,lightblue)
}

<div class="box"></div>

Answer 2

如果不是水平线，你会如何复制它？