条纹背景

水平条纹

.test {
    width: 200px;
    height: 100px;
    background:linear-gradient(#fb3 20%,#58a 80%);
    margin: 0 auto;

}

现在容器顶部的20%区域被填充为#fb3实色，而底部20%区域被填充#58a实色。真正的渐变只出现在容器60%的高度区域。

当渐变设置为50%时，已经没有渐变效果，只有两块实色，各占据了background-image一般面积。也可以通过background-size设置尺寸：

.test {
    width: 200px;
    height: 100px;
    background:linear-gradient(#fb3 50%,#58a 50%);
    margin: 0 auto;
    background-size: 100% 30px;

}

效果图：

我们把这两条条纹的高度都缩小到了15px，默认是重复平铺的。

如果我们把第二个色标的位置值设置为0，那它的位置就总是会被浏览器调整为前一个色标的位置值。

.test {
    width: 200px;
    height: 100px;
    background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
    margin: 0 auto;
    background-size: 100% 45px;

}

效果图：

垂直条纹

通过在开头加上一个额外的参数来指定渐变的方向。默认是 to bottom .最后，我们还需要把background－size的值颠倒一下。

.test {
    width: 200px;
    height: 100px;
    background:linear-gradient(90deg,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
    margin: 0 auto;
    background-size: 45px 100% ;

}

效果图：

斜向条纹

每个重复的小的单元，要包含四条条纹，只有这样才可以做到无缝拼接。

.test {
    width: 200px;
    height: 100px;
    background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
    margin: 0 auto;
    background-size: 30px 30px  ;

}

效果图：