css3渐变（Gradients）

CSS3 渐变（Gradients）

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

• 径向渐变（Radial Gradients）- 由它们的中心定义

  

语法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

例：

         div{
                width: 300px;
                height: 300px;
                margin: 0 auto;
                border: 1px solid;
                background: -webkit-linear-gradient(left,red,green,white,orange, blue); 
            }  

          div{
                width: 300px;
                height: 300px;
                margin: 0 auto;
                border: 1px solid;
                background: -webkit-linear-gradient(red,green,white,orange, blue); 
            }  

                                                                            

          div{
                width: 300px;
                height: 300px;
                margin: 0 auto;
                border: 1px solid;
                background: -webkit-linear-gradient(left top，red,green,white,orange, blue); 
            }  

 

还有一种就是不用设置方向，使用角度去控制渐变方向，0度（下到上），90度（左到右）。。。

                     background: -webkit-linear-gradient(45deg, red,white, blue);

渐变带透明度（0-1） Transparency

                      <span style="font-size:18px;">  background: -webkit-linear-gradient(left,rgba(255,0,0,.2),rgba(255,0,0,1))</span>

                                                                               

重复的线性渐变

                             background: -webkit-repeating-linear-gradient(red 0%, yellow 10%, green 20%);

                                                                               


径向渐变（颜色节点均匀分布）

                           background: -webkit-radial-gradient(red, green, blue);

径向渐变（颜色节点不均匀分布）

                         background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

                                                                               
重复的径向渐变

                           border-radius: 150px;
                           background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);