linear-gradient

语法

text
1 2 3 4 5 6 7 
 
 
  
   ：linear-gradient([ 
,]? <color-stop>[, <color-stop>]+);   
：[ left | right ]? [ top | bottom ]? || <angle>?   <color-stop>：<color> [ <length> | 
 ]?

说明

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

从上到下

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

从左到右

text
1 2 3 4 
 
 
  
   .left-right{        background:-moz-linear-gradient(left, #e97e00, #f80200);       background:-webkit-linear-gradient:(left, #e97e00, #f80200);        background:linear-gradient:(left, #e97e00, #f80200);   }

沿45度方向渐变

text
1 2 3 4 
 
 
  
   .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