使用css3實作背景漸層方法

在沒有了解css也可以做背景漸變以前，我都是透過PS一張背景漸變的圖片來應用到自己所做的網頁中。然而，在前不久我了解到css3也可以做背景漸變後，想要做背景漸變的效果就很容易了許多，以下是一些css3做背景漸變的方法。

一.線性漸變

//自上而下的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}

//从左往右的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}

第一個參數是漸變開始的方向，後面不需跟漸變結束方向；漸變的方向看可以是自上而下，也可以是從左往右；

第二個參數是漸層開始的顏色；

第三個參數是漸層結束的顏色。

 

二.加入stop()函數的線性漸變

p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
 #1a82f7 85%, red);/* Safari, Chrome*/

background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Firefox*/

background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Opera, Opera mobile*/
}

 上面程式碼的意思是：從左15%處，到50%處，再到85%處，最後到右邊，顏色漸變的順序為blue到#1a82f7， #2F2727, #1a82f7再到red。

 

三.徑向漸層（從圓心到圓外）

p{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}

上面程式碼的意思是：一個顏色從blue到red的，從圓心向外圍擴散的徑向漸層。

如果參數circle換成ellipse，則為橢圓形的徑向漸層。

 

四.正對IE瀏覽器的背景漸變

IE瀏覽器實作漸變只能使用IE自己的濾鏡來實作。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一個參數：漸變起始位置的顏色；

第二個參數：漸變終止位置的顏色；

第三個參數：漸層的類型，0代表垂直漸變，1代表橫向漸變。

注意：IE瀏覽器的背景漸層設定不需要給background設置，直接使用filter即可。

 

雖然css3的背景漸層功能強大，但也存在瀏覽器相容性問題。目前css3背景漸變屬性的具體支援情況為：IE10，FireFox3.6+，Safari4.0+，Chrome，Opera11.1（暫不支援徑向漸層）+，IOS 3.2+，Opera Mobile11.1，Android。因此我們在運用css3做背景漸層時需要注意瀏覽器相容性這一點。

以上是使用css3實作背景漸層方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！