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

- 線性漸變
- 徑向漸變

## **線性漸變**

先來看一下語法：

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

解釋一下：

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

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


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

```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> 漸變的形狀。圓形（漸變的形狀是一個(gè)半徑不變的正圓）或橢圓形（軸對稱橢圓）。默認(rèn)值為橢圓
- <size> 漸變的尺寸大小
- <color-stop> 由一個(gè)<color>值組成，并且跟隨著一個(gè)可選的終點(diǎn)位置（可以是一個(gè)百分比值或者是沿著漸變軸的<length>

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


這是一個(gè)紅色到黑色的徑向漸變

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

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

當(dāng)然上面的漸變是非常簡單的玩法，下面我們整點(diǎn)高難度的~

- 顏色突變

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

就像這樣


- 背景的多個(gè)屬性配合

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


這是兩個(gè)漸變疊加配合背景圖平鋪實(shí)現(xiàn)的效果

```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;
```

我們也可以用重復(fù)線性漸變進(jìn)行疊加操作：


```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;
```

再加上億點(diǎn)細(xì)節(jié)~ （background-blend-mode: multiply; 正片疊底效果）

就是這個(gè)樣子啦！Ta Da!


- 漸變色的文字！

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


```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;
```

更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢想。