怎么使用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);
	
}

效果如上圖一樣。

漸變角度或起點

線性漸變時通過指定直線漸變線，然后沿該線放置幾種顏色來創(chuàng)建的漸變。我們可以通過設置，來為漸變提供方向。

我們可以以有兩種方式來設置漸變線的方向：

1、聲明漸變所采用的角度，

2、使用關(guān)鍵字，告訴瀏覽器漸變從哪里開始。

在上述的例子中，我們告訴它從右邊開始向左邊，這相當于角度“-90deg”。所以這會產(chǎn)生相同的結(jié)果：

background: linear-gradient(-90deg, black, white);

效果圖：

如果使用“270deg”角度，也會顯示相同的結(jié)果，相當于“-90deg”。

因此，我們可以使用其中一個位置關(guān)鍵字（頂部，右側(cè)，左側(cè)，底部），或者只是以數(shù)字方式給它一個特定的角度，它將找出從哪里開始。

終止顏色和位置

終止位置

使用簡單的線性漸變，你只需要兩個終止顏色，而無需指定位置（如上述例子所示）。但在下面的示例：

background: linear-gradient(-90deg, black 50%, white 100%);

我們會注意到這已將每種顏色的位置包含在百分比值中。

效果圖：

這告訴瀏覽器每種顏色de漸變要從哪開始從哪結(jié)束（規(guī)定顏色的長度）。瀏覽器自然會找出實際的漸變; 你只需告訴它“漸進變化”應該完全“停止”的地方。在上面的示例中，“漸變”會在元素的左邊停止，因此你在該元素中看不到太多（如果有）全白。

終止顏色

添加色塊不是很復雜了， 只需添加任意數(shù)量的逗號分隔值即可。這是彩虹的CSS：

.demo  {
   background:linear-gradient(to bottom,red 0%,orange 15%,yellow 30%,green 45%,blue 60%,indigo 75%,violet 100%)  ;
}

效果圖：

關(guān)于線性漸變的一些注意事項：

1、CSS3漸變不是屬性，二是由瀏覽器呈現(xiàn)的圖像；

2、你可以在CSS中通過url（image.jpg）在任何位置使用漸變；

3、創(chuàng)建漸變的語法實際上就是一個將各種值作為參數(shù)的函數(shù)；

4、你還可以指定重復的線性漸變，這在某些情況下可以派上很大的用場；

5、顏色終止位置的值可以用百分比表示，也可以用像素表示；

6、對于色標，負百分比值（例如-20％）和百分比高于100％是完全有效的。

關(guān)于怎么使用css3線性漸變語法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。