本篇文章帶給大家的內容是css3線性漸層語法的詳解（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
線性漸變的完整語法：
.demo {
background: linear-gradient(to left, black, white);
}效果：
相容性寫法：
要讓線性漸層適用於所有支援的瀏覽器，可以這樣做：
.demo {
/* IE6 & IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
/* Safari 4 +，Chrome 2+ */
background: -webkit-gradient(linear, left, right, color-stop(0%, #000000), color-stop(100%, #ffffff));
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(right, black, white);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(right, black, white);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(right, black, white);
/* 标准的语法 */
background: linear-gradient(to left, black, white);
}效果如上圖一樣。
漸層角度或起點
線性漸層時會透過指定直線漸層線，然後沿著該線放置幾種顏色來建立的漸層。我們可以透過設置，來為漸變提供方向。
我們可以用有兩種方式來設定漸層線的方向：
1、宣告漸層所採用的角度，
2、使用關鍵字，告訴瀏覽器漸層從哪裡開始。
在上述的例子中，我們告訴它從右邊開始向左邊，這相當於角度「-90deg」。所以這會產生相同的結果：
background: linear-gradient(-90deg, black, white);
效果圖：
#如果使用「270deg」角度，也會顯示相同的結果，相當於“ -90deg」。
因此，我們可以使用其中一個位置關鍵字（頂部，右側，左側，底部），或者只是以數字方式給它一個特定的角度，它將找出從哪裡開始。
終止顏色與位置
##使用簡單的線性漸變，你只需要兩個終止顏色，而無需指定位置（如上述範例所示）。但在下面的範例：
background: linear-gradient(-90deg, black 50%, white 100%);
我們會注意到這已將每種顏色的位置包含在百分比值中。
效果圖：
這告訴瀏覽器每種顏色de漸層要從哪開始從哪裡結束（規定顏色的長度）。瀏覽器自然會找出實際的漸進; 你只需告訴它「漸進變化」應該完全「停止」的地方。在上面的範例中，「漸層」會在元素的左邊停止，因此你在該元素中看不到太多（如果有）全白。
終止顏色
新增色塊不是很複雜了， 只要加上任意數量的逗號分隔值。這是彩虹的CSS：
.demo {
background:linear-gradient(to bottom,red 0%,orange 15%,yellow 30%,green 45%,blue 60%,indigo 75%,violet 100%) ;
}效果圖：
#關於線性漸變的一些注意事項：
1、CSS3漸變不是屬性，二是由瀏覽器呈現的圖像；
#2、你可以在CSS中透過url（image.jpg）在任何位置使用漸層；
3、建立漸變的語法其實就是一個將各種值當作參數的函數；
4、你也可以指定重複的線性漸變，這在某些情況下可以派上很大的用場；
5、顏色終止位置的值可以用百分比表示，也可以用像素表示；
6、對於色標，負百分比值（例如-20％）而百分比高於100％是完全有效的。
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。
以上是css3線性漸變語法的詳解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
