【CSS3】 渐变不可怕

一、两色渐变    

    background:linear-gradient();

        linear-gradient(#fff,#333); 默认从上往下渐变，从#fff渐变到#333;

        linear-gradient(to bottom,#fff,#333); 第一个参数可设置渐变方向: top/bottom/left/right,如果不设置，默认从上至下。或 linear-gradient(top top,#333,#fff); 也可以设置 左上，右上，左下，右下。

        linear-gradient(to bottom,#fff 0%,#333 100%)；或 (to top,#333 0%,#fff 100%);

        linear-gradient(180deg,#fff,#333); 从旋转角度设置渐变方向: 90deg - 从左往右; 180deg - 从上往下; 270deg - 从右往左; 360deg - 从下往上；

        以上方向都可实现如图效果：

        

        

                linear-gradient(to top right,#fff,#333) 或 linear-gradient(45deg,#fff,#333)

        效果如下 ：

         

二、三色渐变

         background:linear-gradient();

            linear-gradient(#ccc,#c897be 50%,#54a4d1); 第二个值后面可设置前两种颜色所占比，默认是50%;

           linear-gradient(to top,#ccc,#c897be 50%,#54a4d1); 第一个参数可设置方向；颜色值后跟的百分比表示当前颜色所占比，方向可设置  左上，右上，左下，右下。

        效果如下：

        

             linear-gradient(45deg,#ccc,#c897be 50%,#54a4d1 80%) 或 (to top right,#ccc,#c897be 50%,#54a4d1 80%)

              效果如下：

               

三、多色渐变：

             background:linear-gradient();

           linear-gradient(45deg,#ccc 20%,#c897be 40%,#54a4d1 60%,#5fe03d 80%);

          

      效果如下：

                 

四、 代码贴士：