CSS3－漸變背景色

線性漸變背景色：

<style>

.linear { width:130px; height:130px; border:2px solid black; padding: 10px;

background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));

-webkit-background-origin: padding; -webkit-background-clip: content; }

</style>

<div class="linear"></div>

第 一個參數爲漸變方式，後兩個參數爲起始點位置和終止點位置，後兩個參數爲起始顏色和終止顏色，後面那個參數爲背景區域padding表示包含 padding的區域，content表示不包含content的區域，最後那個參數爲背景的實際使用區域，能夠爲content或padding。

線性漸變的另外一種簡化寫法：

<div style="border-radius:20px;height:200px; background:-webkit-linear-gradient(yellow,orange,red,green,blue,purple);">

</div>

放射性漸變：

<style>

.radial {

width:150px;

height:150px;

border:2px solid black;

background-image: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),

-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),

-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),

-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));

display: block;

}

</style>

<div class="radial"></div>

radial以後的四個數字分別是起始點座標，起始圓半徑，終止點座標，終止圓半徑。to的顏色最後都變成了徹底透明，不然的話不會受到終止圓範圍的限制。color－stop能夠有多個，用來調整漸變途徑中的顏色。

此外，能夠經過-webkit-background-size: 20px 50px;指定一塊背景區域的長，高，或 -webkit-background-size: 20px;同時指定長和高， 來指定

一個背景區域的大小。 這樣能夠實現平鋪的效果等。

放射性漸變的另外一種寫法：

safari對漸變的實現默認並非圓形，而是上面那樣根據div的大小變化的橢圓形，可是chrome的實現是圓形。若是safari要實現標準的圓形，可改成(circle,white,black).

放射性邊框圖片：

-webkit-border-image: -webkit-radial-gradient(white,red) 100%;

方式性漸變圖片做爲蒙板（實現文字現實區域跟隨鼠標移動而變化）：

<style>

#c{

    background:white;

 -webkit-mask-box-image: -webkit-radial-gradient(50% 50%, white, transparent 80px);

}

</style>

<div id="c">

新華網杭州10月16日電(記者張遙、王政)淘寶商城15日下午再次發佈公告，對近日備受爭議的2012年收費規則做出詳細解釋。而組織本次行動的語音聊天羣裏仍有數萬網民彙集，稱等待淘寶給出解決辦法。

　　由於修改收費規則受到抵觸，11日晚間開始，中國最大的B2C電子商務平臺淘寶商城持續受到數萬名自稱「中小賣家」的網民集體攻擊，部分網店下架商品暫停營業。

　　淘寶商城在公告中表示，淘寶已經從兩個半月以前針對新規定開始與賣家溝通，經過多種途徑聽賣家的想法建議。「9月份的時候，咱們還專門爲這個事情，請來各類類型不一樣類目的商家，開過2場面對面的溝通會。」淘寶方面稱，絕大多數賣家支持這項新規定。

　　針對外界有關「新規定是變相漲價」的質疑，淘寶方面表示，調整不是漲價，年費從往年6000元調整至3萬元、6萬元兩檔，可是隻要能達到必定經營規模和服務質量，就能得到部分或所有返還。

</div>

<script>

require('jquery.js');

var div=$('#c');

div.mousemove(function(e){

div.css("-webkit-mask-box-image","-webkit-radial-gradient("+e.offsetX+"px "+e.offsetY+"px, white, transparent 80px)");

});

</script>

 

參考 http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html