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>：用角度值指定漸變的方向（或角度）。
to left：設置漸變為從右到左。相當于: 270deg
to right：設置漸變從左到右。相當于: 90deg
to top：設置漸變從下到上。相當于: 0deg
to bottom：設置漸變從上到下。相當于: 180deg。這是默認值，等同于留空不寫。

<color-stop>：用于指定漸變的起止顏色：
<color>：指定顏色。
<length>：用長度值指定起止色位置。不允許負值
<percentage>：用百分比指定起止色位置。

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

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

linear-gradient()的用法實例

HTML部分：

<div id="box"></div>

CSS部分：

#box{
    height: 200px;
    width: 300px;
       background: -webkit-linear-gradient(right, red , yellow); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient( right, red, yellow); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right, red , yellow); /* 標準的語法（必須放在最后） */
   }

效果圖：

如圖所示，實例是從紅色到黃色，從左至右的線性漸變，寫的時候要注意瀏覽器的兼容性問題和語法規則。本文主要介紹了CSS中的線性漸變，漸變分為線性漸變和徑向漸變，下一篇文章會和大家分享徑向漸變。喜歡的朋友可以關注我！

以上就是深入理解CSS中線性漸變linear-gradient屬性的詳細內容，更多請關注php中文網其它相關文章！