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

 

转载于:https://www.cnblogs.com/pomelott/p/6952973.html