背景漸變是一個很好的的特效，那么如何去利用CSS3去做這個效果呢，今天將為大家分享CSS3漸變，CSS3漸變是向圖像模塊中添加的新類型的圖像。CSS3漸變允許在兩個或多個指定顏色之間顯示平滑過渡。

瀏覽器支持兩種類型的漸變：

linear, 用linear-gradient()函數(shù)定義,

radial, 用radial-gradient()函數(shù)定義.

使用過程中注意瀏覽器的兼容問題

Safari ， Chrome ：-webkit-linear-gradient

Firefox ：-moz-linear-gradient

IE ：-ms-linear-gradient

Opera：-o-linear-gradient

本篇文章將以Chrome 瀏覽器為例進(jìn)行講解

線性漸變

要創(chuàng)建線性漸變，將起點和方向設(shè)置為角度，還要定義顏色停止必須指定至少兩個停止顏色。

從頂部到底部的線性漸變

div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
}

從左到右的漸變過程

 div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}

線性漸變（偶數(shù)停頓）

div{
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}

徑向漸變

徑向漸變由它的中心定義，必須至少定義兩種顏色結(jié)點，還可以指定漸變的中心、形狀（圓形或橢圓形）、大小，默認(rèn)情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。

居中徑向漸變

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
 background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
}

自定義徑向漸變

closest-side： 最近端， closest-corner：最近角

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: 80% 20%;//自己自定義位置
background-repeat: no-repeat;
 background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
}

總結(jié)：以上就是本篇文章的所有內(nèi)容了，希望通過本篇文章對大家學(xué)習(xí)漸變有所幫助。

以上就是如何使用CSS3中g(shù)radient屬性做出背景漸變效果的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！