使用css3實現背景漸層方法

來源:互聯網
上載者:User
在沒有瞭解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做背景漸層時需要注意瀏覽器安全色性這一點。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.