background渐变颜色代码（一句话样式代码实现CSS3 background 渐变效果）

这里老蒋需要给一个客户的网站设置背景渐变色 
  
  
  
  
  
  
  
  ，这里看到这一组配色效果还是不错的 
  
  
  
  
  
  
  
  
 ，于是就将这些脚本记录下来

 


 


 


 


 


 


 


 


，以后如果有需要的话还可以用到                  。这实现方法是用到CSS3 background 渐变效果
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
。

这里用到的是现行渐变效果
















。

background:linear-gradient

设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色

Linear 渐变的类型：

1 
  
  
  
  
  
  
  
  、渐变的形式：可选参数 有两种方式-1 
  
  
  
  
  
  
  
  
 、设置旋转角度 
 
 
 
 
 
 
 
 ，0度代表水平从左到右 
   
   
   
   
   
   
   
   
 ，90度就是从上到下啦
 

 

 

 

 

 

 

 

，从0度开始逆时针变换  
  
  
  
  
  
  
  
  。

2

 


 


 


 


 


 


 


 


、使用关键字
 

 

 

 

 

 

 

 

 ，left代表从左到右                 ，top代表从上到下 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，同理right就是从右到左
















，lefttop-从坐上到右下                          ，同理leftbottom 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，righttop

























，rightbottom 
  
  
  
  
  
  
  
  
。

几个案例样式记录：

background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%); background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%); background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%); background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%); background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%); background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);

最后附带径向渐变的规范和方法

径向渐变：radial-gradient（设置渐变的中心                 ，渐变形状 渐变大小 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，起始颜色值

















，中间颜色值 中间颜色位置 
  
  
  
  
  
  
  
  ，终点颜色）

渐变中心 
  
  
  
  
  
  
  
  
 ，可选参数

 


 


 


 


 


 


 


 


，如30px 20px指距离左侧30px距离上侧20px 
 
 
 
 
 
 
 
 ，可以是像素 
   
   
   
   
   
   
   
   
 ，可以是百分比
 

 

 

 

 

 

 

 

，也可以是关键字
 

 

 

 

 

 

 

 

 ，默认为中心位置


 


 


 


 


 


 


 


 

。

渐变形状                 ，可选参数 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，可以取值circle或eclipse【默认】

渐变大小
















，可循环参数                          ，可以取值

closest-side：

指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner：

指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side：

指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner：

指定径向渐变的半径长度为从圆心到离圆心最远的角

contain：

包含 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，指定径向渐变的半径长度为从圆心到离圆心最近的点 
 
 
 
 
 
 
 
 。类同于closest-side

cover：

覆盖

























，指定径向渐变的半径长度为从圆心到离圆心最远的点  
   
   
   
   
   
   
   
   
。类同于farthest-corner circle farthest-corner圆形渐变                 ，ellipse farthest-corner椭圆渐变

 

 

 

 

 

 

 

 
。