CSS中線性漸變linear-gradient屬性的示例分析

小編給大家分享一下CSS中線性漸變linear-gradient屬性的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　linear-gradient()的語法：

　　<linear-gradient>=linear-gradient([[<angle>|to<side-or-corner>],]?<color-stop>[,<color-stop>]+)

　　<side-or-corner>=[left|right]||[top|bottom]

　　<color-stop>=<color>[<length>|<percentage>]?

　　linear-gradient()的取值：

　　下述值用來表示漸變的方向，可以使用角度或者關(guān)鍵字來設(shè)置：

　　<angle>：用角度值指定漸變的方向（或角度）。

　　toleft：設(shè)置漸變?yōu)閺挠业阶蟆Ｏ喈?dāng)于:270deg

　　toright：設(shè)置漸變從左到右。相當(dāng)于:90deg

　　totop：設(shè)置漸變從下到上。相當(dāng)于:0deg

　　tobottom：設(shè)置漸變從上到下。相當(dāng)于:180deg。這是默認(rèn)值，等同于留空不寫。

　　<color-stop>：用于指定漸變的起止顏色：

　　<color>：指定顏色。

　　<length>：用長(zhǎng)度值指定起止色位置。不允許負(fù)值

　　<percentage>：用百分比指定起止色位置。

　　注意：為了創(chuàng)建一個(gè)線性漸變，你需要設(shè)置一個(gè)起始點(diǎn)和一個(gè)方向（指定為一個(gè)角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，并且你必須指定至少兩種，當(dāng)然也會(huì)可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。

　　linear-gradient()的瀏覽器兼容性

　　瀏覽器.jpg

　　linear-gradient()的用法實(shí)例

　　HTML部分：

　　<divid="box"></div>

　　CSS部分：

　　#box{

　　height:200px;

　　width:300px;

　　background:-webkit-linear-gradient(right,red,yellow);/*Safari5.1-6.0*/

　　background:-o-linear-gradient(right,red,yellow);/*Opera11.1-12.0*/

　　background:-moz-linear-gradient(right,red,yellow);/*Firefox3.6-15*/

　　background:linear-gradient(toright,red,yellow);/*標(biāo)準(zhǔn)的語法（必須放在最后）*/

　　}

以上是“CSS中線性漸變linear-gradient屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！