CSS渐变属性的设置方法（css渐变）

 1.  线性渐变（是从一个方向到另一个方向的渐变）

属性值：background：linear-gradient（颜色）

✍默认值：从上到下线性渐变： 

代码：

 结果：

✍ 属性延伸：

（1）改变渐变方向：

从下到上：background：linear-gradient（to top yellow,green)

从左到右：background：linear-gradient（to right yellow,green)

从右到左：background：linear-gradient（to left yellow,green)

从左上到右下：background：linear-gradient（to bottom right yellow,green)

（2）改为任意角度的渐变

属性：background：linear-gradient（50deg yellow,green)

含义是：从红色到绿色50°渐变；

0°渐变是：红色从下到上渐变为绿色；90°是从左到右；180°是从上到下；270°是从右到左

2.  径向渐变（从一个小点到四周的渐变）

属性：background：radial-gradient（颜色值）

（1）不规则颜色渐变：background:radial-gradient (yellow 30%  
    
    
    
  ，orange 50%

     


     


     


     
，green 80%)

代码：

 结果：

 这个百分比的含义是 




 




 




 




，拿上面的代码说明：黄色到盒子30%的位置开始渐变为橙色  

   

   

   

 ，30%以前不渐变都是黄色

     

     

     

     ，橙色从50%的位置开始渐变为绿色  




  




  




  




，80%以后都是纯绿色  
    
    
    
  。

还有一个极端一点的：background：radial-gradient（red 50%  


  


  


  


，bule 50%）

含义是：红色从50%位置开始渐变
     
     
     
     ，而50%以后都是蓝色
   




   




   




   



，所以从50%-50%之间没有渐变 



 



 



 



，所以两个纯色的圆                    ，前50%是红色

    




    




    




    


，后50%是蓝色

     


     


     


     
。

（2）设置渐变形状

（3）改变中心点的位置和改变渐变的大小

 x轴60%



















，y轴40%的位置                    ，坐标原点在左下角

     



     



     



     

，



















，  
    
    
    
  ，

如果属性不好用了

     


     


     


     
，可以在前面加：“-webkit-  
    
    
    
  ”（google浏览器特定的格式 




 




 




 




，其他浏览器可以去百度查查）

3.  重复渐变

图示：

 代码：

 结果：

 代码：

 结果：

4.太极小练习：

用到“：：before

     


     


     


     
”和“：：after 




 




 




 




”伪元素  

   

   

   

 ，和线性渐变的知识：

代码：

结果：