css - 在渐变中间添加 4 种颜色

Question

像这样中间有4种颜色，这部分代码要改成什么？

linear-gradient(to bottom, teal 85px, #0000 85px),
linear-gradient(to top, teal 85px, #0000 85px);

https://jsfiddle.net/5k94s01b/

我正在尝试在方形渐变的中间添加 4 种颜色。

这就是我试图弄清楚该怎么做。

它将如何添加到代码中？

我一直无法弄清楚该怎么做。

现在它看起来像这样：

.box {
  width: 170px;
  height: 170px;

  background-image:

    linear-gradient(to bottom, teal 5px, #0000 5px),
    linear-gradient(to left, teal 5px, #0000 5px),
    linear-gradient(to top, 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 10px, #0000 10px),
    linear-gradient(to top, black 10px, #0000 10px),
    linear-gradient(to right, black 10px, #0000 10px),

    linear-gradient(to bottom, orange 15px, #0000 15px),
    linear-gradient(to left, orange 15px, #0000 15px),
    linear-gradient(to top, orange 15px, #0000 15px),
    linear-gradient(to right, orange 15px, #0000 15px),

    linear-gradient(to bottom, black 20px, #0000 20px),
    linear-gradient(to left, black 20px, #0000 20px),
    linear-gradient(to top, black 20px, #0000 20px),
    linear-gradient(to right, black 20px, #0000 20px),

    linear-gradient(to bottom, teal 25px, #0000 25px),
    linear-gradient(to left, teal 25px, #0000 25px),
    linear-gradient(to top, teal 25px, #0000 25px),
    linear-gradient(to right, teal 25px, #0000 25px),
    
    linear-gradient(to bottom, black 30px, #0000 30px),
    linear-gradient(to left, black 30px, #0000 30px),
    linear-gradient(to top, black 30px, #0000 30px),
    linear-gradient(to right, black 30px, #0000 30px),
    
    linear-gradient(to bottom, orange 35px, #0000 35px),
    linear-gradient(to left, orange 35px, #0000 10px),
    linear-gradient(to top, orange 35px, #0000 35px),
    linear-gradient(to right, orange 35px, #0000 35px),

    linear-gradient(to bottom, black 40px, #0000 40px),
    linear-gradient(to left, black 40px, #0000 40px),
    linear-gradient(to top, black 40px, #0000 40px),
    linear-gradient(to right, black 40px, #0000 40px),

    linear-gradient(to bottom, teal 45px, #0000 45px),
    linear-gradient(to left, teal 45px, #0000 45px),
    linear-gradient(to top, teal 45px, #0000 45px),
    linear-gradient(to right, teal 45px, #0000 45px),

    linear-gradient(to bottom, black 50px, #0000 50px),
    linear-gradient(to left, black 50px, #0000 10px),
    linear-gradient(to top, black 50px, #0000 50px),
    linear-gradient(to right, black 50px, #0000 50px),
    
    linear-gradient(to bottom, orange 55px, #0000 55px),
    linear-gradient(to left, orange 55px, #0000 10px),
    linear-gradient(to top, orange 55px, #0000 55px),
    linear-gradient(to right, orange 55px, #0000 55px),
    
    linear-gradient(to bottom, black 60px, #0000 60px),
    linear-gradient(to left, black 60px, #0000 60px),
    linear-gradient(to top, black 60px, #0000 60px),
    linear-gradient(to right, black 60px, #0000 60px),

    linear-gradient(to bottom, teal 65px, #0000 65px),
    linear-gradient(to left, teal 65px, #0000 65px),
    linear-gradient(to top, teal 65px, #0000 65px),
    linear-gradient(to right, teal 65px, #0000 65px),

    linear-gradient(to bottom, black 70px, #0000 70px),
    linear-gradient(to left, black 70px, #0000 70px),
    linear-gradient(to top, black 70px, #0000 70px),
    linear-gradient(to right, black 70px, #0000 70px),
    
    linear-gradient(to bottom, orange 75px, #0000 75px),
    linear-gradient(to left, orange 75px, #0000 75px),
    linear-gradient(to top, orange 75px, #0000 75px),
    linear-gradient(to right, orange 75px, #0000 75px),

    linear-gradient(to bottom, black 80px, #0000 80px),
    linear-gradient(to left, black 80px, #0000 80px),
    linear-gradient(to top, black 80px, #0000 80px),
    linear-gradient(to right, black 80px, #0000 80px),

    linear-gradient(to bottom, teal 85px, #0000 85px),
    linear-gradient(to top, teal 85px, #0000 85px);
   
  background-size: 170px 170px;
  background-repeat: no-repeat;
}

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

标签： csslinear-gradients

Answer 1

使用сonic-gradient作为底部背景层：

.сoncentric-squares-with-center-multicolor {
  width: 170px; height: 170px;
  background:
    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),
    
    /* For the latest browsers: */
    conic-gradient(at 85px 85px, #3f48cc 0deg 90deg, #f00 90deg 180deg, #ff0 180deg 270deg, #99D9EA 270deg 360deg),
    /* or browsers that do not support conic-gradient: */
    left 85px top 85px / 165px 165px linear-gradient(45deg, #3f48cc 0px 59px, #0000 59px 175px, #ff0 175px 233px),     
    left 85px top 85px / 165px 165px linear-gradient(-45deg, #99D9EA 0px 60px, #0000 60px 175px, #f00 175px 233px),    
    left 60px top 60px / 82px 82px linear-gradient(-135deg, #3f48cc 0px 60px, #0000 60px 175px, #ff0 175px 233px),    
    left 60px top 60px / 82px 82px linear-gradient(135deg, #f00 0px 61px, #0000 61px 175px, #99d9ea 175px 233px);
  background-size: 165px 165px;
  /* background-position: 0 0; default */
  /* background-repeat: repeat; default */
}

body { margin: 0; min-height: 100vh; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center; }

<div class="сoncentric-squares-with-center-multicolor"></div>