動畫相關之線性漸變和徑向漸變

線性漸變，表示兩種顏色或多種顏色之間的平滑過渡。由漸變線和色標組成，漸變線控制漸變方向，色標控制顏色變化(包含乙個顏色值和位置)。

漸變線的起點和終點與漸變框乙個角垂直線相交，且經過漸變框中心。

角度漸變線可以使用角度來指定方向，0deg表示沿著元素中心的y軸從下到上，正直表示順時針旋轉。

關鍵字漸變線也可以使用關鍵字來指定方向，預設為to bottom。

to top 表示 0deg

to right 表示 90deg
to bottom 表示 180deg
to left 表示 -90deg(或270deg)
to top left 表示 -45deg(或315deg)
to top right 表示 45deg
to bottom left 表示 -135deg(或225deg)
to bottom right 表示 135deg

如果只有兩個色標，可省略位置，將分別為0%和100%位置。

// 等於linear-gradient(red 0%,blue 100%)

linear-gradient(red,blue);

background-image: linear-gradient(red 20%,blue 80%);

// 等價
background-image: linear-gradient(red 0%,red 20%,blue 80%,blue 100%);

background-image: linear-gradient(red 50%,white 50%,black 50%);

// 等價
background-image: linear-gradient(red, 50%,black 50%);

// 各佔33.333%

background-image: linear-gradient(red,green,blue);

background-image: repeating-linear-gradient(red 20%,blue 50%);

radial-gradient([[||]?[at ,]?[,]+)

形狀橢圓形狀(shape)，可選擇圓(circle)或橢圓(ellipse)，預設為ellipse。

大小可使用關鍵字，百分比或長度單位。如果是圓，則表示半徑；如果是橢圓，第乙個值表示水平直徑，第二隻表示垂直直徑；如果是關鍵字，如下所示：

closest-side: 最近邊

closest-corner: 最近角
farthest-side: 最遠邊
farthest-side: 最遠角

橢圓位置有多種表示方式，可通過關鍵字，百分比或長度來表示。

// 關鍵字

left right top bottom
// 百分比：x軸百分比相對框的寬度，y軸百分比相對於框的高度
50% 60%
// 長度：以左上角為0點進行定位

如果只有兩個色標，可省略位置，將分別為0%和100%位置。

// 等於linear-gradient(red 0%,blue 100%)

linear-gradient(red,blue);

background-image: radial-gradient(red 20%,blue 80%);

// 等價
background-image: radial-gradient(red 0%,red 20%,blue 80%,blue 100%);

background-image: radial-gradient(red 50%,white 50%,black 50%);

// 等價
background-image: radial-gradient(red, 50%,black 50%);

// 各佔33.333%

background-image: radialr-gradient(red,green,blue);

background-image: repeating-radial-gradient(red 20%,blue 80%);

線性漸變和徑向漸變

linear gradient direction，color 寫法 background webkit linear gradient direction，color 1.direction 方向，預設方向是自上而下 寫法有 1.background webkit linear gradient ...

線性漸變和徑向漸變

格式 background image linear gradient 方向，起始顏色 終止顏色 方向 to left to right to top to bottom 角度 360 180 45 從左下到右上 90 相當於 to right 從左到右 135 從左上到右下 180 從上到下 di...

css3 線性漸變和徑向漸變

線性漸變 ie6以下不相容 徑向漸變 只支援firefox chrome和safari 注意 background image 可以寫 background 我自己在網頁中寫的徑向漸變相容 firefox chrome ie10 ie10 safari background image老式寫法 相容...