css3中的線性漸變，有了這個，好多以前必須要用才能實現的效果如今可能只需簡單一行**就能實現。
首先看看今天的主角：linear-gradient()。
它，實際上不是顏色，而是背景。也就是說，它並不是color的屬性值，而是background的屬性值。
我們接下來看看linear-gradient()的具體用法。
語法：
= linear-gradient
([ [| to ] ,]? [，]+)
= [left | right] || [top | bottom]
= [|]?
: 用角度值指定漸變的方向（或角度）。
to left：設定漸變為從右到左。相當於
: 270deg
to right：設定漸變從左到右。相當於
: 90deg
to top：設定漸變從下到上。相當於
: 0deg
to bottom：設定漸變從上到下。相當於
: 180deg。這是預設值，等同於留空不寫。
用於指定漸變的起止顏色：
： 指定顏色。
：用長度值指定起止色位置。不允許負值
：用百分比指定起止色位置。
沒關係，學習都是需要循序漸進的，我們從最簡單的開始……
這個很好理解，要做漸變，當然得設定顏色值，換句話說，你得讓瀏覽器知道你想要實現從哪個顏色到哪個顏色之間的漸變。例如，你要實現從紅色到黃色之間的漸變，你可以這樣寫：
background
:linear-gradient
(#f00,#ff0)
;
background
:linear-gradient
(#f00,#ff0,#0f0)
;
有時候我們不只是想要從上而下固定方向上的顏色漸變，可能想要實現的是各個方向上的漸變，那麼此時我們可以在 1 中傳入多個顏色值的基礎上再傳入漸變方向，該引數作為第乙個引數，可以是八種方向，也可以是具體的角度值。
我們來看具體例項：
background
:linear-gradient
(to right,#f00,#ff0)
;
如果想要實現從左下角往右上角的漸變，那麼第乙個引數可以寫成to right top或者直接寫具體角度值45deg，上面例子就可以這樣寫：
background
:linear-gradient
(to right top,#f00,#ff0)
;
background
:linear-gradient
(45deg,#f00,#ff0)
;
預設情況下的起止位置是從0%到100%，也就是說 1 中例子實際上還可以寫成下面這樣（效果如圖一）：
background
:linear-gradient
(#f00 0%,#ff0 100%)
;
background
:linear-gradient
(#f00 0%,#ff0 50%,#0f0 100%)
;
background
:linear-gradient
(#f00 0,#ff0 75px,#0f0 150px)
;
我們來看乙個具體例項：
background
:linear-gradient
(#f00 0%,#f00 50%,#ff0 50%,#ff0 100%)
;
background
:linear-gradient
(45deg,#f00 0%,#f00 33.33%,#ff0 33.33%,#ff0 66.66%,#0f0 66.66%,#0f0 100%)
;
為了讓大家都能更好的理解，我們來一步步分解這些引數吧~~
① 45deg（漸變方向）
這個很好理解，45deg則代表的是從元素左下角到右上角的漸變，可以用to right top替代之。
② #f00 0%,#f00 33.33%（紅色色塊）
由紅色漸變到紅色，當然就是純紅色咯~
0%和33.33%則代表的是相應顏色所在的位置。
③ #ff0 33.33%,#ff0 66.66%（黃色色塊）
原理同上。
④ #0f0 66.66%,#0f0 100%（綠色色塊）
原理同上。
想要細緻的了解的話可以自己動手操作下
css之線性漸變
至少兩種顏色，多了不限 background image linear gradient 顏色1，顏色2.如下 效果圖如下 background image linear gradient 角度值，顏色1，顏色2.效果圖如下 background image linear gradient to 方...
CSS3 11 漸變 線性漸變 徑向漸變
漸變是css3當中比較豐富多彩的乙個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少的使用數量，並且具有很強的適應性和可擴充套件性。可分為線性漸變 徑向漸變1.linear gradient線性漸變指沿著某條直線朝乙個方向產生漸變效果 a 語法 linear gradient b 引數說明 第乙...
css3線性漸變
css3漸變有兩種 linear gradient線性漸變和radial gradient徑向漸變。今天看的是linear gradient線性漸變，所以只做線性漸變的總結。w3c標準語法 formal grammar linear gradient to left right top bottom...