linear-gradient() 線性漸變
設定2種以上顏色線性漸變。
background-image: linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, …);
設定值
| angle | 定義漸變方向角度 180deg (default) 0deg ~ 360deg |
| side-or-corner | 定義漸變起點位置 horizontal side : left right vertical side : top bottom |
| color-stop1, color-stop2,… | 定義漸變長度 0%~100% |
/* css範例-基本漸層設定 */
#grad {
background-image: conic-gradient(red, yellow, green);
}
/* css範例-3種顏色以上漸變設定 */
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
/* css範例-搭配方向漸層設定 */
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
/* css範例-搭配角度漸層設定 */
#grad {
background-image: linear-gradient(180deg, red, blue);
}
/* css範例-多色漸層設定 */
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
/* css範例-透明漸層設定 */
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
repeating-linear-gradient() 重複線性漸變
設定2種以上顏色重複線性漸變。
background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, …);
/* css範例-基本漸層設定 */
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
/* css範例-不同角度漸變設定 */
#grad1 {
background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}
radial-gradient() 徑向漸變
設定2種以上顏色徑向漸變。
background-image: radial-gradient(shape size at position, start-color, …, last-color);
設定值
| shape | 定義漸變形狀 ellipse (default) circle |
| size | 定義漸變大小 farthest-corner (default) closest-side closest-corner farthest-side |
| position | 定義漸變中心位置 center (default) |
| start-color, … , last-color | 定義漸變長度 0%~100% |
/* css範例-基本漸層設定 */
#grad {
background-image: radial-gradient(red, green, blue);
}
/* css範例-自訂間距漸層設定 */
#grad {
background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
/* css範例-圓形漸層設定 */
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
/* css範例-漸層中心位移 */
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}
/* css範例-透明漸層設定 */
.radial-gradient {
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
repeating-radial-gradient() 重複徑向漸變
設定2種以上顏色重複徑向漸變。
background-image: repeating-radial-gradient(shape size at position, start-color, …, last-color);
/* css範例-基本漸層設定 */
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
conic-gradient() 圓錐漸變
設定2種以上顏色圓錐漸變。
background-image: conic-gradient([from angle] [at position,] color degree, color degree, …);
設定值
| from angle | 定義圓錐漸變角度 0deg (default) |
| at position | 定義圓錐漸變中心 center (default) |
| color degree, …, color degree | 定義圓錐漸變長度 0%~100% 0deg~360deg |
/* css範例-基本漸層設定 */
#grad {
background-image: conic-gradient(red, yellow, green);
}
/* css範例-3種顏色以上漸層設定 */
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
/* css範例-搭配角度漸層設定 */
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
/* css範例-圓形邊框漸層設定 */
#grad1 {
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
/* css範例-圓形邊框搭配角度漸層設定 */
#grad1 {
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
/* css範例-圓形邊框中心點位移漸層設定 */
#grad1 {
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
/* css範例-圓形邊框角度+中心點位移漸層設定 */
#grad1 {
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
/* css範例-圓形邊框色塊分割設定 */
#grad1 {
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
repeating-conic-gradient() 重複圓錐漸變
設定2種以上顏色重複圓錐漸變。
background-image: repeating-conic-gradient([from angle] [at position,] color degree, color degree, …);
/* css範例-基本漸層設定 */
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
}
/* css範例-色塊分割設定 */
#grad {
background-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}
