css3線性漸變語法的詳解（程式碼範例）

本篇文章帶給大家的內容是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中文網其他相關文章！