css中可以進行背景的漸變，通常來說，我們使用的是下面兩種漸變

- 線性漸變
- 徑向漸變

## **線性漸變**

先來看一下語法：

```text
linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops
```

解釋一下：

- <angle> 角度值指定漸變的方向（或角度）。
- <side-or-corner> 漸變線的起始點位置。它包含to和兩個關鍵詞：第一個指出水平位置left or right， 第二個指出垂直位置top or bottom。關鍵詞的先后順序無影響，且都是可選的。
- <color-stop> 由一個`<color>`值組成，并且跟隨著一個可選的終點位置（可以是一個百分比值或者是沿著漸變軸的`<length>`

于是我們有了下面的效果：


這是一個從左到右的金色到粉色的線性漸變

```css
background-image: linear-gradient(to right, gold, pink)
```

## **徑向漸變**

先來看下語法：

```css
radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
```

或者我們可以簡化成下面這樣：

```text
radial-gradient(shape size position, color-stop[...,color-stop]);
```

解釋一下：

- <position> 徑向漸變的圓心位置
- <shape> 漸變的形狀。圓形（漸變的形狀是一個半徑不變的正圓）或橢圓形（軸對稱橢圓）。默認值為橢圓
- <size> 漸變的尺寸大小
- <color-stop> 由一個<color>值組成，并且跟隨著一個可選的終點位置（可以是一個百分比值或者是沿著漸變軸的<length>

于是我們有了下面的效果：


這是一個紅色到黑色的徑向漸變

```text
background-image: radial-gradient(red,black)
```

## **漸變的花式玩法**

當然上面的漸變是非常簡單的玩法，下面我們整點高難度的~

- 顏色突變

我們當前做的漸變是一個均勻的漸變，如果多個顏色具有相同的位置，那么這些顏色就會在一個無限小的過渡區域進行過渡，從視覺上看，顏色在該位置就會突然變化，而不是一個平滑的過渡效果。

就像這樣


- 背景的多個屬性配合

漸變可以當背景圖去處理，既然是背景圖，那么就可以進行疊加和平鋪，于是我們得到了下面的效果：


這是兩個漸變疊加配合背景圖平鋪實現的效果

```css
background-image:
                linear-gradient(rgba(255,0,0,0.5) 50% ,transparent 50%),
                linear-gradient(to right,rgba(255,0,0,0.5) 50% , #fff 50% );
background-size: 50px 50px;
```

我們也可以用重復線性漸變進行疊加操作：


```css
background-image:
                repeating-linear-gradient(-45deg,
                    transparent,
                    transparent 25%,
                    tomato 0,
                    tomato 50%),
                repeating-linear-gradient(45deg,
                    transparent,
                    transparent 25%,
                    dodgerblue 0,
                    dodgerblue 50%), wheat;

background-size: 50px 50px;
```

再加上億點細節~ （background-blend-mode: multiply; 正片疊底效果）

就是這個樣子啦！Ta Da!


- 漸變色的文字！

`-webkit-background-clip:text` 這個屬性可以將背景色裁剪到文字中，然后我們先這樣再這樣最后那樣就得到一個很棒的漸變色的文字！


```css
 color: transparent;
 background:
            repeating-linear-gradient(-45deg,
            transparent,
            transparent 25%,
            tomato 0,
            tomato 50%),
            repeating-linear-gradient(45deg,
            transparent,
            transparent 25%,
            dodgerblue 0,
            dodgerblue 50%), wheat;
background-size: 50px 50px;
background-blend-mode: multiply;
-webkit-background-clip: text;
```

- 漸變的邊框

利用`border-image-source` 屬性可以把漸變放在邊框中，像這樣：


```css
border: 20px solid;
border-image-source:
   repeating-linear-gradient(-45deg,
   cyan 0,
   cyan 15px,
   transparent 15px,
                        transparent 30px,
                        tomato 30px,
                        tomato 45px,
                        transparent 45px,
                        transparent 60px);

border-image-slice: 20;
```

更多關于“web前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。