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()的取值：

　　下述值用來表示漸變的方向，可以使用角度或者關鍵字來設置：

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

　　toleft：設置漸變為從右到左。相當于:270deg

　　toright：設置漸變從左到右。相當于:90deg

　　totop：設置漸變從下到上。相當于:0deg

　　tobottom：設置漸變從上到下。相當于:180deg。這是默認值，等同于留空不寫。

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

　　<color>：指定顏色。

　　<length>：用長度值指定起止色位置。不允許負值

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

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

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

　　瀏覽器.jpg

　　linear-gradient()的用法實例

　　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);/*標準的語法（必須放在最后）*/

　　}

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