backgroundLinearGradient線性漸變製作折角效果
阿新 • • 發佈:2019-02-09
backgroundLinearGradient線性漸變,製作折角效果
語法
線性漸變 - 從上到下(預設情況下)
background: linear-gradient(direction, color-stop1, color-stop2, ...);
製作折角效果
background: linear-gradient(45deg, rgb(120, 120, 120) 0%, rgb(120, 120, 120) 50%, rgb(52, 52, 52) 50%, rgb(34, 34, 34) 61%);
效果如下
例項1
從上到下的線性漸變,由紅色漸變到藍色
.box{ background: linear-gradient(red, blue); }
例項2
從左到右的線性漸變,由紅色漸變到藍色
```
.box{
background: linear-gradient(to right, red, blue);
}
```
例項3
使用角度, 角度是指水平線和漸變線之間的角度,逆時針
方向計算。換句話說,0deg 將建立一個從下到上的漸變,90deg 將建立一個從左到右的漸變。
如果你想要在漸變的方向上做更多的控制,你可以定義一個角度,而不用預定義方向(to bottom、to top、to right、to left、to bottom right,等等)。
``` .box{ background: linear-gradient(45deg, red, blue); } ```
使用多個顏色結點
.box{
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}