雖說css3 都已經使用多年了，但是關於css3的漸變用的很少。今天遇見了，就學習了一下。
首先我們開啟ps，新建乙個畫布，選擇漸變工具，這個時候我們能夠看到頂欄上面的漸變型別如下
第乙個我們選中的是線性漸變，第二個是徑向漸變，第三個是角度漸變，第四個是對稱漸變，第五個是菱形漸變。對於css3 並沒有提供這麼多的漸變型別，只提供了兩種基本的漸變型別：線性漸變和徑向漸變，還有一種組合漸變就是重複漸變。
線性漸變
css3 中的線性漸變用的是 linear-gradient 這個函式。
基本語法：
= linear-gradient([ [ | to [, ]+)語法說明：= [left | right] || [top | bottom]
= [ |]?
：用角度值指定漸變的方向（或角度）。
to left：設定漸變為從右到左。相當於: 270deg
to right：設定漸變從左到右。相當於: 90deg
to top：設定漸變從下到上。相當於: 0deg
to bottom：設定漸變從上到下。相當於: 180deg。這是預設值，等同於留空不寫。
用於指定漸變的起止顏色：
：指定顏色。
：用長度值指定起止色位置。不允許負值
：用百分比指定起止色位置。
例項如下：
徑向漸變
使用函式：raidal-gradient
基本語法
= [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]?語法的簡單描述= circle | ellipse
= |[||]
= closest-side | closest-corner | farthest-side | farthest-corner
= = [ | ]
= | = radial-gradient([ [ || ] [ at ]? , | at , ]?[[ , ]]+)
確定圓心的位置。如果提供2個引數，第乙個表示橫座標，第二個表示縱座標；如果只提供乙個，第二值預設為50%，即center
①：用長度值指定徑向漸變圓心的橫座標值。可以為負值。
①：用百分比指定徑向漸變圓心的橫座標值。可以為負值。
②：用長度值指定徑向漸變圓心的縱座標值。可以為負值。
②：用百分比指定徑向漸變圓心的縱座標值。可以為負值。
center①：設定中間為徑向漸變圓心的橫座標值。
center②：設定中間為徑向漸變圓心的縱座標值。
left：設定左邊為徑向漸變圓心的橫座標值。
right：設定右邊為徑向漸變圓心的橫座標值。
top：設定頂部為徑向漸變圓心的縱座標值。
bottom：設定底部為徑向漸變圓心的縱座標值。
確定圓的型別
circle：指定圓形的徑向漸變
ellipse：指定橢圓形的徑向漸變。
circle | ellipse 都接受該值作為 size。
closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊。
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角。
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊。
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。
circle 接受該值作為 size。
：用長度值指定正圓徑向漸變的半徑長度。不允許負值。
ellipse 接受該值作為 size。
：用長度值指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。
：用百分比指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。
例項如下：
重複漸變
重複漸變分為重複線性漸變和重複徑向漸變，重複漸變的語法其實和相對應的基礎漸變的語法是相類似的。
下面給出一些基本的例項：
以上就是有關漸變的基本學習
CSS3中漸變效果
1.線性漸變 a 從左到右漸變 div nth child 1 b 不指定方向預設是從上到下 div nth child 2 c 按照指定角度 div nth child 3 d 斑馬線漸變 2.頸項漸變 radial gradient 輻射半徑，中心的位置，起始顏色，終止顏色 中心點位置 at l...
CSS3顏色漸變
漸變帶來了色彩巨大的展現。可謂不可不學 是故收集整理，權當乙個小教程吧。一 線性漸變在mozilla下的應用 語法 moz linear gradient 引數 其共有三個引數，第乙個引數表示線性漸變的方向，top是從上到下 left是從左到右，如果定義成lefttop，那就是從左上角到右下角。第二...
詳解CSS3漸變
漸變，指形狀或顏色的有規律性的變化，往往可以給人很強的節奏感和審美情趣，這裡研究的主要是顏色的漸變。漸變的形式在日常生活中很常見，在網頁中的用的也很多，傳統網頁技術中往往用來實現漸變，容易帶來載入負擔和動態定製的瓶頸。css3提供了實現漸變的屬性，隨著瀏覽器的逐步支援，研究css3漸變已勢在必行。涉...