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);

        }