線性漸變可以設定3個引數值：方向、起始顏色、結束顏色。最簡單的模式只需要定義起始顏色和結束顏色，起點、終點和方向預設自元素的頂部到底部。下面舉例說明：
css code複製內容到剪貼簿
上述**的效果如圖所示。
最簡單的線性漸變效果
如果要在一些舊版本的瀏覽器（除ie）下可以正常顯示如圖5.9的效果，則需要新增相容**：
css code複製內容到剪貼簿
線性漸變可以指定漸變的方向，如下例：
css code複製內容到剪貼簿
程式設計客棧
上述**的效果如圖所示，設定了left/to right引數後，漸變方向從自上而下變成了自左向右。
指定起點
注意：標準寫法的漸變方向格式如上例中的「to right」，在火狐和opera瀏覽器下則使用right，而對於webkit核心瀏覽器則使用起點位置left來表示。
漸變方向還可以使用角度來表示，0deg、90deg、180deg和270deg分別對應to top、to right、to bottom和to left，例如：
css code複製內容到剪貼簿
效果如圖所示。
圖5.11 指定漸變方向為45°
線性漸變不止支援兩種顏色的漸變，還可以新增任意種顏色，比如可以使用線性漸變構造乙個彩虹效果，如圖5.12所示。
彩虹色上圖所示的彩虹色效果**如下：
css code複製內容到剪貼簿
本文標題: css3中顏色線性漸變實戰
本文位址:
CSS3顏色漸變
漸變帶來了色彩巨大的展現。可謂不可不學 是故收集整理，權當乙個小教程吧。一 線性漸變在mozilla下的應用 語法 moz linear gradient 引數 其共有三個引數，第乙個引數表示線性漸變的方向，top是從上到下 left是從左到右，如果定義成lefttop，那就是從左上角到右下角。第二...
css3線性漸變
css3漸變有兩種 linear gradient線性漸變和radial gradient徑向漸變。今天看的是linear gradient線性漸變，所以只做線性漸變的總結。w3c標準語法 formal grammar linear gradient to left right top bottom...
css3線性漸變
css3線性漸變 為了建立乙個線性漸變，必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以設定乙個起點和乙個方向 或者乙個角度 語法 background image linear gradient direction,color1,color2 線性漸變 從上到下 預設情...