這篇文章將為大家詳細講解有關(guān)css中背景顏色線性漸變和徑向漸變效果的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、成都做網(wǎng)站與策劃設(shè)計,官渡網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:官渡等地區(qū)。官渡做網(wǎng)站價格咨詢:13518219792

一、線性漸變（linear-gradient）

實現(xiàn)線性漸變，至少需要定義兩種顏色，這兩種顏色就是你想平穩(wěn)過渡的顏色，即：其中一種顏色為起點，另一種顏色為結(jié)束點。

語法：

background: linear-gradient(colorA,colorB)

colorA為起點顏色，colorB為結(jié)束點顏色。

還可以定義漸變的方向，是從上到下漸變，還是從左至右漸變，又或者是從左上角至右下角漸變（默認情況下是從上至下漸變的）。

語法：

background: linear-gradient(direction,colroA,colorB)

direction表示漸變的方向，直接寫方向的起點即可，比如：漸變方向為從左至右，直接寫left即可；漸變方向為從下至上，直接寫bottom即可；漸變方向從左上角至右下角，書寫為background: linear-gradient(left top,colorA,colorB)。

css線性漸變案例

舉例：從左下角至右上角，從紅色到藍色的漸

效果圖：

代碼：

 
  
  
  
   div{
    width: 400px;
    height: 200px;
    background: -webkit-linear-gradient(left bottom,red,blue);
    background: -o-linear-gradient(left bottom,red,blue);
    background: -moz-linear-gradient(left bottom,red,blue);
    background: linear-gradient(left bottom,red,blue);
   }
  
 
 
  

 

二、徑向漸變（radial-gradient）

CSS3徑向漸變是圓形或橢圓形的漸變。顏色不再沿著一條直線軸變化，而是從一個起點向所有方向發(fā)射。它比線性漸變更復(fù)雜。

可以定義它的中心(默認漸變是中心是center)、形狀（原型或者橢圓形）、大小等。

語法：background: radial-gradient(position,shape，size,start-color,last-color)

position
：用長度值指定徑向漸變圓心的橫坐標或縱坐標?？梢詾樨撝怠?br/>：用百分比指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。
left：設(shè)置左邊為徑向漸變圓心的橫坐標值。
center：設(shè)置中間為徑向漸變圓心的橫坐標值或縱坐標。
right：設(shè)置右邊為徑向漸變圓心的橫坐標值。
top：設(shè)置頂部為徑向漸變圓心的縱標值。
bottom：設(shè)置底部為徑向漸變圓心的縱標值。

shape
可以是值 circle 或 ellipse。circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。

size
closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角；默認值

css徑向漸變案例

舉例：從60%，55%的位置開始漸變，指定徑向漸變的半徑長度為從圓心到離圓心最近的邊，從內(nèi)向外漸變顏色為blue,green,yellow,black

效果圖：

代碼：

 
  
  
  
   div{
    width: 400px;
    height: 200px;
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
     background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
   }
  
 
 
  

 

關(guān)于“css中背景顏色線性漸變和徑向漸變效果的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章名稱：css中背景顏色線性漸變和徑向漸變效果的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://weahome.cn/article/jgggs.html