backgroundLinearGradient線性漸變製作折角效果

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);
}