css3 Gradient背景

css3的gradient分爲兩種：線性漸變（linear）和徑向漸變（radial）。

1、線性漸變linear-gradient

一、介紹

linear-gradient([設置方向]，[設置開始顏色]，[設置多種過分顏色]，[設置結束顏色])

參數：

第一個參數：指定漸變方向，能夠用「角度」的關鍵字或「英文」來表示：

第一個參數默認：180deg，等同於「to bottom」。

後面的顏色至少有2個，即開始顏色和結束顏色。

二、使用

a、舉例：

<style type="text/css">
p{
    width: 300px;
    height: 100px;
    background-image:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
<p>從左到右線性漸變背景</p>

b、一個很是酷的功能：用漸變製做導航分割線

background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px; 意思背景使用漸變色，而後不重複，居右，斜線後面的實際上是background-size的設置，width 1px，height 15px

 View Code

效果：

c、谷歌搜索低調的線性漸變背景

查看了一個google搜索的代碼，寫了個例子

 View Code

 

 

 

 

2、徑向漸變radial-gradient

待續

 

 

 

大漠寫的css3 gradient

http://www.w3cplus.com/content/css3-gradient