CSS3利用背景漸變和background-size配合完成漸變與條紋效果[持續更新中...]

1.不等垂直條紋。

<!-- 不等垂直條紋 -->
    <div class="div1"></div>div1

        div{
            width: 200px;
            height: 200px;
        }
        .div1{

            background: linear-gradient(#ff0 30%, #f00 30%);
            background-size: 100% 30;
        }

2.垂直條紋漸變

        .div5{
            background: linear-gradient(#ff0 30%, #f00 90%);
            background-size: 100% 30px;
        }

3.斜向條紋

        .div3{
            background: repeating-linear-gradient(30deg,#ff0,#ff0 10px,#f00 0,#f00 30px);
            /*background-size:30px;*/
        }

4.

        .div4{
            background: repeating-linear-gradient(30deg,#ff0,#f00 30px);
        }