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

zyfwsgd6  于 2024-01-09  发布在  其他
关注(0)|答案(1)|浏览(111)

如何使CSS背景渐变与90度线。应该开始没有线,然后一个实线,和未来3条虚线。

hl0ma9xz

hl0ma9xz1#

你可以像下面这样做:

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

个字符
透明度如下:

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

的字符串

相关问题