如何使用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>