css学习笔记5--条纹背景

水平条纹

两种颜色的条纹

 div{
            width: 20em;
            height: 10em;
            background: linear-gradient(#5378d4 30%, yellow 30%);
            background-size: 100% 30px;
        }

超过两种颜色的条纹，也是很容易的。例如下面三种颜色的水平条纹：

    div{
            width: 20em;
            height: 10em;
            background: linear-gradient(#5378d4 33.3%, yellow 0, yellow 66.6%, deeppink 0);
            background-size: 100% 45px;
        }

垂直条纹

     div{
            width: 20em;
            height: 10em;
            background: linear-gradient(to right, #5378d4 50%, yellow 50%);
            background-size: 30px 100%;
        }

    div{
            width: 20em;
            height: 10em;
            background: linear-gradient(45deg,
                                        #5378d4 25%, yellow 0, yellow 50%,
                                         #5378d4 0, #5378d4 75%, yellow 0);
            background-size: 42px 42px;
        }

它的色标是无限循环重复的，直到填满整个背景。

    div{
            width: 20em;
            height: 10em;
            background: repeating-linear-gradient(45deg, #5378d4, #5378d4 15px,yellow 0, yellow 30px);
        }

灵活的同色系条纹

    div{
            width: 20em;
            height: 10em;
            background: #58a;
            background-image: repeating-linear-gradient(30deg,
                                                        hsla(0, 0%,100%, .1),
                                                        hsla(0, 0%,100%, .1) 15px,
                                                        transparent 0, transparent 30px);
        }