div {
margin: auto;
width: 500px;
height: 500px;
background:
conic-gradient(from 270deg at 5px 20px, #31c2ec 90deg, transparent 0deg),
conic-gradient(from 270deg at 20px 5px, #31c2ec 90deg, transparent 0deg),
repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
repeating-linear-gradient(0 , #aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
#0e284d;
background-repeat: repeat,repeat, no-repeat, no-repeat;
background-size:
100px 100px,
100px 100px,
100% 100%,
100% 100%;
background-position:
-2.5px -10px,
-10px -2.5px,
0 0,
0 0;
}
conic-gradient(from 270deg at 5px 20px, #31c2ec 90deg, transparent 0deg)
from 270deg at 5px 20px 指定开始旋转角度为270，旋转中心为 （5，20）
#31c2ec 90deg, transparent 0deg 设置颜色渐变 一般是两个为一组
repeating-linear-gradient(0 , #aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px)
90 代表水平 0 代表垂直
#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px 代表 #aec8ee 这个颜色1px transparent 100px 循环
background-size 可以针对每一个样式单独设置size
background-position 针对每一个样式设置位置
效果图：
