5

我是否能够将这种线性渐变图案的尺寸缩小到比我能够实现的尺寸更大的程度?

有可能吗?

在我的第一个示例中,代码真的很长,在我的第二个示例中,我能够使代码更小/更短。

我想知道它是否可以比我能做的更短/更小。

我正在做或尝试做的只是减少 css 线性渐变模式代码中的行数。

在您的回答中,您可以提供如何缩短我的 2 个代码示例中的一个两个的示例。

或者,如果您知道如何使用 css 渐变的不同方法以不同的方式重新创建相同的模式。

在此处输入图像描述

代码 1 https://jsfiddle.net/t1n3jh0d/

     body {
       background-image:
         linear-gradient(to bottom, teal 5px, #0000 5px),
         linear-gradient(to right, teal 5px, #0000 5px),
    
         linear-gradient(to bottom, black 10px, #0000 10px),
         linear-gradient(to left, black 5px, #0000 5px),
         linear-gradient(to top, black 5px, #0000 5px),
         linear-gradient(to right, black 10px, #0000 10px),
    
         linear-gradient(to bottom, orange 15px, #0000 15px),
         linear-gradient(to left, orange 10px, #0000 10px),
         linear-gradient(to top, orange 10px, #0000 10px),
         linear-gradient(to right, orange 15px, #0000 15px),
    
         linear-gradient(to bottom, black 20px, #0000 20px),
         linear-gradient(to left, black 15px, #0000 15px),
         linear-gradient(to top, black 15px, #0000 15px),
         linear-gradient(to right, black 20px, #0000 20px),
    
         linear-gradient(to bottom, teal 25px, #0000 25px),
         linear-gradient(to left, teal 20px, #0000 20px),
         linear-gradient(to top, teal 20px, #0000 20px),
         linear-gradient(to right, teal 25px, #0000 25px),
    
         linear-gradient(to bottom, black 30px, #0000 30px),
         linear-gradient(to left, black 25px, #0000 25px),
         linear-gradient(to top, black 25px, #0000 25px),
         linear-gradient(to right, black 30px, #0000 30px),
    
         linear-gradient(to bottom, orange 35px, #0000 35px),
         linear-gradient(to left, orange 30px, #0000 30px),
         linear-gradient(to top, orange 30px, #0000 30px),
         linear-gradient(to right, orange 35px, #0000 35px),
    
         linear-gradient(to bottom, black 40px, #0000 40px),
         linear-gradient(to left, black 35px, #0000 35px),
         linear-gradient(to top, black 35px, #0000 35px),
         linear-gradient(to right, black 40px, #0000 40px),
    
         linear-gradient(to bottom, teal 45px, #0000 45px),
         linear-gradient(to left, teal 40px, #0000 40px),
         linear-gradient(to top, teal 40px, #0000 40px),
         linear-gradient(to right, teal 45px, #0000 45px),
    
         linear-gradient(to bottom, black 50px, #0000 50px),
         linear-gradient(to left, black 45px, #0000 45px),
         linear-gradient(to top, black 45px, #0000 45px),
         linear-gradient(to right, black 50px, #0000 50px),
    
         linear-gradient(to bottom, orange 55px, #0000 55px),
         linear-gradient(to left, orange 50px, #0000 50px),
         linear-gradient(to top, orange 50px, #0000 50px),
         linear-gradient(to right, orange 55px, #0000 55px),
    
         linear-gradient(to bottom, black 60px, #0000 60px),
         linear-gradient(to left, black 55px, #0000 55px),
         linear-gradient(to top, black 55px, #0000 55px),
         linear-gradient(to right, black 60px, #0000 60px),
    
         linear-gradient(to bottom, teal 65px, #0000 65px),
         linear-gradient(to left, teal 60px, #0000 60px),
         linear-gradient(to top, teal 60px, #0000 60px),
         linear-gradient(to right, teal 65px, #0000 65px),
    
         linear-gradient(to bottom, black 70px, #0000 70px),
         linear-gradient(to left, black 65px, #0000 65px),
         linear-gradient(to top, black 65px, #0000 65px),
         linear-gradient(to right, black 70px, #0000 70px),
    
         linear-gradient(to bottom, orange 75px, #0000 75px),
         linear-gradient(to left, orange 70px, #0000 70px),
         linear-gradient(to top, orange 70px, #0000 70px),
         linear-gradient(to right, orange 75px, #0000 75px),
    
         linear-gradient(to bottom, black 80px, #0000 80px),
         linear-gradient(to left, black 75px, #0000 75px),
         linear-gradient(to top, black 75px, #0000 75px),
         linear-gradient(to right, black 80px, #0000 80px),
    
         linear-gradient(to bottom, teal 85px, #0000 85px),
         linear-gradient(to left, teal 85px, #0000 85px);
       background-size: 165px 165px;
     }

代码 2 https://jsfiddle.net/koqy9hp0/

    body {
       background-image:
         linear-gradient(teal 5px, #0000 5px),
         linear-gradient(90deg, teal 5px, #0000 5px),
    
         linear-gradient(black 10px, #0000 10px 160px, black 160px),
         linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
      
         linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
         linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
         
         linear-gradient(black 20px, #0000 20px 150px, black 150px),
         linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
         
         linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
         linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
    
         linear-gradient(black 30px, #0000 30px 140px, black 140px),
         linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
     
         linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
         linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
    
         linear-gradient(black 40px, #0000 40px 130px, black 130px),
         linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
    
         linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
         linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
    
         linear-gradient(black 50px, #0000 50px 120px, black 120px),
         linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
    
         linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
         linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
    
         linear-gradient(black 60px, #0000 60px 110px, black 110px),
         linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
    
         linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
         linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
    
         linear-gradient(black 70px, #0000 70px 100px, black 100px),
         linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
    
         linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
         linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
    
         linear-gradient(black 80px, #0000 80px 90px, black 90px),
         linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
    
         linear-gradient(teal, teal);
       background-size: 165px 165px;
     }

4

3 回答 3

7

使用蒙版和 2 个渐变的想法:

body::before,
body::after {
  content: "";
  --g: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--g)) 0 0/85px 100%;
}

body::after {
  background: repeating-linear-gradient(var(--g)) 0 0/100% 85px;
  -webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)0 0/170px 170px;
}

或者

body::before,
body::after {
  content: "";
  --g: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--g)) 0 0/80px 100%;
}

body::after {
  background: repeating-linear-gradient(var(--g)) 0 0/100% 80px;
  -webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)2.5px 2.5px/160px 160px;
}

也像下面这样:

body::before,
body::after {
  content: "";
  --g: 
    teal 0 5px , black 0 10px, orange 0 15px, black 0 20px,
    teal 0 25px, black 0 30px, orange 0 35px, black 0 40px,
    teal 0 45px, black 0 50px, orange 0 55px, black 0 60px,
    teal 0 65px, black 0 70px, orange 0 75px, black 0 80px,
    teal 0 85px,
    teal 0 90px, black 0 95px, orange 0 100px, black 0 105px,
    teal 0 110px, black 0 115px, orange 0 120px, black 0 125px,
    teal 0 130px, black 0 135px, orange 0 140px, black 0 145px,
    teal 0 150px, black 0 155px, orange 0 160px, black 0 165px;
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, var(--g)) 0 0/165px 100%;
}

body::after {
  background:linear-gradient(var(--g)) 0 0/100% 165px;
  -webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)2.5px 2.5px/165px 165px;
}

于 2021-10-12T08:48:53.880 回答
1

最聪明的做法是将背景设为 svg。

CSS:

body {
    background-image:url('./bg.svg');
    background-size: 165px 165px;
} 

对于 svg 文件,创建文件并将其粘贴到其中:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165">
    <defs>
        <style>.cls-1{fill:teal;}.cls-2{fill:#ffa600;}</style>
    </defs>

    <rect class="cls-1" width="165" height="165"/>
    <rect x="5" y="5" width="160" height="160"/>
    <rect class="cls-2" x="10" y="10" width="150" height="150"/>
    <rect x="15" y="15" width="140" height="140"/>
    <rect class="cls-1" x="20" y="20" width="130" height="130"/>
    <rect x="25" y="25" width="120" height="120"/>
    <rect class="cls-2" x="30" y="30" width="110" height="110"/>
    <rect x="35" y="35" width="100" height="100"/>
    <rect class="cls-1" x="40" y="40" width="90" height="90"/>
    <rect x="45" y="45" width="80" height="80"/>
    <rect class="cls-2" x="50" y="50" width="70" height="70"/>
    <rect x="55" y="55" width="60" height="60"/>¨
    <rect class="cls-1" x="60" y="60" width="50" height="50"/>
    <rect x="65" y="65" width="40" height="40"/>
    <rect class="cls-2" x="70" y="70" width="30" height="30"/>
    <rect x="75" y="75" width="20" height="20"/>
    <rect class="cls-1" x="80" y="80" width="10" height="10"/>
</svg>
于 2021-10-18T17:04:04.833 回答
0

我不知道您是否可以在不使用 SCSS 之类的预处理器或@Temani 建议的方法之一的情况下使其更短,但如果主要目标是使其更易于维护,则可以使用自定义属性

在示例中,您可以通过仅更改一个值来更改宽度、颜色和背景大小,而不必单独调整每个linear-gradient

body {
  --width: 5px;
  --backgroundSize: calc(var(--width) * 33);
  --color1: teal;
  --color2: black;
  --color3: orange;
  --transparent: rgba(255, 255, 255, 0);

  background-size: var(--backgroundSize) var(--backgroundSize);
  background-image:
   linear-gradient(to bottom, var(--color1) var(--width), var(--transparent) var(--width)),
   linear-gradient(to right, var(--color1) var(--width), var(--transparent) var(--width)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to left, var(--color2) var(--width), var(--transparent) var(--width)),
   linear-gradient(to top, var(--color2) var(--width), var(--transparent) var(--width)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 17), var(--transparent) calc(var(--width) * 17)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 17), var(--transparent) calc(var(--width) * 17));
}

使用自定义属性编辑第二个代码示例的示例:

body {
  --width: 5px;
  --backgroundSize: calc(var(--width) * 33);
  --color1: teal;
  --color2: black;
  --color3: orange;
  --transparent: rgba(255, 255, 255, 0);

  background-size: var(--backgroundSize) var(--backgroundSize);
  background-image:
    linear-gradient(var(--color1) var(--width), var(--transparent) var(--width)),
    linear-gradient(90deg, var(--color1) var(--width), var(--transparent) var(--width)),
    linear-gradient(var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2) calc(var(--width) * 32), var(--color2) calc(var(--width) * 32)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2) calc(var(--width) * 32), var(--color2) calc(var(--width) * 32)),
    linear-gradient(var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3) calc(var(--width) * 31), var(--color3) calc(var(--width) * 31)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3) calc(var(--width) * 31), var(--color3) calc(var(--width) * 31)),
    linear-gradient(var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4) calc(var(--width) * 30), var(--color2) calc(var(--width) * 30)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4) calc(var(--width) * 30), var(--color2) calc(var(--width) * 30)),
    linear-gradient(var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5) calc(var(--width) * 29), var(--color1) calc(var(--width) * 29)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5) calc(var(--width) * 29), var(--color1) calc(var(--width) * 29)),
    linear-gradient(var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6) calc(var(--width) * 28), var(--color2) calc(var(--width) * 28)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6) calc(var(--width) * 28), var(--color2) calc(var(--width) * 28)),
    linear-gradient(var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7) calc(var(--width) * 27), var(--color3) calc(var(--width) * 27)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7) calc(var(--width) * 27), var(--color3) calc(var(--width) * 27)),
    linear-gradient(var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8) calc(var(--width) * 26), var(--color2) calc(var(--width) * 26)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8) calc(var(--width) * 26), var(--color2) calc(var(--width) * 26)),
    linear-gradient(var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9) calc(var(--width) * 25), var(--color1) calc(var(--width) * 25)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9) calc(var(--width) * 25), var(--color1) calc(var(--width) * 25)),
    linear-gradient(var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10) calc(var(--width) * 24), var(--color2) calc(var(--width) * 24)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10) calc(var(--width) * 24), var(--color2) calc(var(--width) * 24)),
    linear-gradient(var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11) calc(var(--width) * 23), var(--color3) calc(var(--width) * 23)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11) calc(var(--width) * 23), var(--color3) calc(var(--width) * 23)),
    linear-gradient(var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12) calc(var(--width) * 22), var(--color2) calc(var(--width) * 22)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12) calc(var(--width) * 22), var(--color2) calc(var(--width) * 22)),
    linear-gradient(var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13) calc(var(--width) * 21), var(--color1) calc(var(--width) * 21)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13) calc(var(--width) * 21), var(--color1) calc(var(--width) * 21)),
    linear-gradient(var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14) calc(var(--width) * 20), var(--color2) calc(var(--width) * 20)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14) calc(var(--width) * 20), var(--color2) calc(var(--width) * 20)),
    linear-gradient(var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15) calc(var(--width) * 19), var(--color3) calc(var(--width) * 19)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15) calc(var(--width) * 19), var(--color3) calc(var(--width) * 19)),
    linear-gradient(var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16) calc(var(--width) * 18), var(--color2) calc(var(--width) * 18)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16) calc(var(--width) * 18), var(--color2) calc(var(--width) * 18)),
    linear-gradient(var(--color1), var(--color1));
}

于 2021-10-13T21:40:59.127 回答