background-size问题的请教？

Question

.box{

        width: 300px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        background: 
            linear-gradient(315deg, white 25%, red 25%, red 50%, white 50%, white 75%, red 75%, red 100%),
            no-repeat;
        /* background-position: 0px; */
        background-size: 30px 30px;
    }
    

上面代码中把backgournd-size的宽设置为30px,呈现出的效果是这样的

改为20px后,是这样的

为什么30px就能够很好的拼接起来？

Answer 1

因为30px刚好能构成一个循环