css渐变色

/*基本用法*/
            background-image: linear-gradient(green, yellow, blue, green);
            background-image: linear-gradient(rgba(255, 0, 0, .2), yellow, blue, green);
            /*控制颜色渐变的方向
                to right -- 从左向右
                to top -- 从下到上
                to left -- 从右到左
                to bottom --- 从上到下（默认值）
            */
            background-image: linear-gradient(to right, green, yellow, blue, green);
            background-image: linear-gradient(to top, green, yellow, blue, green);
            background-image: linear-gradient(to left, green, yellow, blue, green);
            background-image: linear-gradient(to bottom, green, yellow, blue, green);
 
            /*0deg = to top -- 从下到上*/
            background-image: linear-gradient(0deg, red, yellow, blue, green);
            /*基于0度顺时针旋转45deg*/
            background-image: linear-gradient(45deg, red, yellow, blue, green);
            /*基于0度逆时针旋转45deg*/
            background-image: linear-gradient(-45deg, red, yellow, blue, green);
 
            /*设置过渡颜色的起始位置*/
            /*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
            background-image: linear-gradient(to right, red 50px, yellow, blue, green);
            background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
            background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);