在渐变的中间添加 4 种颜色
Add 4 colors to the middle of a gradient
像这样中间有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>
底部背景层使用с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>
像这样中间有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>
底部背景层使用с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>