如何将渐变模式减少到更少的代码
How to reduce gradient pattern to less code
我正在尝试减小渐变模式使用的这段代码的大小，有没有办法做到这一点？
这就是我想要做的。
减少代码的大小。
如何做到这一点？
代码能不能写成使用更少代码的方式？
我不知道该怎么做。
https://jsfiddle.net/g3do25pw/
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;
}
- 由于背景具有固定大小，您可以通过指定多个颜色过渡点轻松组合成对的渐变。
- 您也可以将关键字替换为以度为单位的值，并完全删除默认的“到底”。
因此，代码将减少一倍半。
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;
}
我正在尝试减小渐变模式使用的这段代码的大小，有没有办法做到这一点？
这就是我想要做的。
减少代码的大小。
如何做到这一点？
代码能不能写成使用更少代码的方式？
我不知道该怎么做。
https://jsfiddle.net/g3do25pw/
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;
}
- 由于背景具有固定大小，您可以通过指定多个颜色过渡点轻松组合成对的渐变。
- 您也可以将关键字替换为以度为单位的值，并完全删除默认的“到底”。
因此，代码将减少一倍半。
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;
}