CSS3特效之渐变:linear-gradient

linear-gradient

语法

 
 
  
   ：linear-gradient([ 
,]? <color-stop>[, <color-stop>]+);   
：[ left | right ]? [ top | bottom ]? || <angle>?   <color-stop>：<color> [ <length> | 
 ]?  

说明

 
 
  
   
可取如下值       left：设置左边为渐变起点的横坐标值。       right：设置右边为渐变起点的横坐标值。       top：设置顶部为渐变起点的纵坐标值。       bottom：设置底部为渐变起点的纵坐标值。   <angle>：       用角度值指定渐变的方向（或角度）。   <color-stop>：       指定渐变的起止颜色。  

从上到下

<button class="btn btn-success top-bottom" style="">从上到下渐变</button>

 
 
  
   .top-bottom{        background:-moz-linear-gradient(top, #e97e00, #f80200);       background:-webkit-linear-gradient:(top, #e97e00, #f80200);        background:linear-gradient:(top, #e97e00, #f80200);       float:left;   }  

从左到右

<button class="btn btn-success left-right" style="">从左到右渐变</button>

 
 
  
   .left-right{        background:-moz-linear-gradient(left, #e97e00, #f80200);       background:-webkit-linear-gradient:(left, #e97e00, #f80200);        background:linear-gradient:(left, #e97e00, #f80200);   }  

沿45度方向渐变

<button class="btn btn-success topleft" style="">从左上角至右下角</button>

 
 
  
   .topleft{        background:-moz-linear-gradient(45deg, #e97e00, #f80200);       background:-webkit-linear-gradient:(45deg, #e97e00, #f80200);        background:linear-gradient:(45deg, #e97e00, #f80200);   }  

原文地址：https://blog.csdn.net/gepingping/article/details/8769248?ops_request_misc=&request_id=6c19665b5171484fa1ff5cf64d700d68&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-25-8769248-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88