线性渐变知几何

最简单的渐变

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(#fb3, #58a);
}

拉近填充

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(#fb3 20%, #58a 80%);
}

再近点：

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(#fb3 40%, #58a 60%);
}

条纹背景

百分比相同会怎样？

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(#fb3 50%, #58a 50%);
}

喔！有意思，这不就是条纹了嘛？设置下background-size不就实现了条纹背景了？

横向条纹

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(#fb3 50%, #58a 50%);
    background-size: 100% 30px;
}

同理，我们可以很轻易做出纵向的条纹：

纵向条纹

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(to right, #fb3 50%, #58a 50%);
    background-size: 30px 100%;
}

多颜色条纹

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(#fb3 33%, #58a 33%, #58a 66%, yellowgreen 66%);
    background-size: 100% 30px;
}

不知道大家有没有注意到这边的百分比，每个色值的开始和结束的百分比必须一致，这就意味着我想修改百分比占比就必须改两处，有没有只改一处就可以的写法呢？当然有，大家请看：

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0);
    background-size: 100% 30px;
}

结束的百分比设置成0，意味着始终以起始的百分比一致，这算是css语言的巧妙之处了。效果一模一样，现在我想调整百分比，只需修改一处地方了：

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(#fb3 50%, #58a 0, #58a 66%, yellowgreen 0);
    background-size: 100% 30px;
}

倾斜条纹

顺着以上的思路，我们不难想到倾斜的条纹应该如何写，不假思索写出以下代码：

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(45deg, #fb3 50%, #58a 0);
    background-size: 30px 30px;
}

效果可真棒呢！虽然不是我们想要的效果。我们应该如何做到无缝拼接呢？我们可以这样：

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
    background-size: 30px 30px;
}

不过这谁能轻易想到呢？而且如果角度不是45度呢？也能实现吗？试试换成其他角：

.demo {
    width: 180px;
    height: 120px;
    background-image: linear-gradient(50deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
    background-size: 30px 30px;
}

不出所料，它裂开了！这种情况可咋整啊？不要慌，css强大的很，总能祭出大招让你意想不到。

更好的倾斜条纹

repeating-linear-gradient顾名思义就是重复线性渐变的意思，简单使用看看效果：

.demo {
    width: 180px;
    height: 120px;
    background-image: repeating-linear-gradient(50deg, #fb3, #58a 30px);
}

稍加改动：

.demo {
    width: 180px;
    height: 120px;
    background-image: repeating-linear-gradient(50deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}

举一反三：

.demo {
    width: 180px;
    height: 120px;
    background-image: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px, yellowgreen 0, yellowgreen 45px);
}

同色系条纹

.demo {
    width: 180px;
    height: 120px;
    background-color: #58a;
    background-image: repeating-linear-gradient(60deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);
}