如何使CSS背景渐变与90度线。应该开始没有线,然后一个实线,和未来3条虚线。
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>
的字符串
1条答案
按热度按时间hl0ma9xz1#
你可以像下面这样做:
个字符
透明度如下:
的字符串