如何用css实现渐变

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

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

![img](https://pic4.zhimg.com/80/v2-a5619a524d2867fb87026426dbe3394b_720w.jpg)

这是一个从左到右的金色到粉色的线性渐变

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

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

![img](https://pic1.zhimg.com/80/v2-3be59a375a924c39d2106566a79cd760_720w.jpg)

这是一个红色到黑色的径向渐变

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

## **渐变的花式玩法**

当然上面的渐变是非常简单的玩法，下面我们整点高难度的~

- 颜色突变

我们当前做的渐变是一个均匀的渐变，如果多个颜色具有相同的位置，那么这些颜色就会在一个无限小的过渡区域进行过渡，从视觉上看，颜色在该位置就会突然变化，而不是一个平滑的过渡效果。

就像这样

![img](https://pic3.zhimg.com/80/v2-71dfdfc0da9060d08d47fd33ee6a1a02_720w.jpg)

- 背景的多个属性配合

渐变可以当背景图去处理，既然是背景图，那么就可以进行叠加和平铺，于是我们得到了下面的效果：

![img](https://pic4.zhimg.com/80/v2-36c1d5925ca15e4b241f1ddc0496d0eb_720w.jpg)

这是两个渐变叠加配合背景图平铺实现的效果

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

我们也可以用重复线性渐变进行叠加操作：

![img](https://pic4.zhimg.com/80/v2-ce60500da4345794188498c20d32c753_720w.jpg)

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

![img](https://pic2.zhimg.com/80/v2-07266c3b1f6a614d54e1967c39ed8545_720w.jpg)

- 渐变色的文字！

`-webkit-background-clip:text` 这个属性可以将背景色裁剪到文字中，然后我们先这样再这样最后那样就得到一个很棒的渐变色的文字！

![img](https://pic1.zhimg.com/80/v2-570ef762003a8b7400dad4f7f465dc78_720w.jpg)

```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` 属性可以把渐变放在边框中，像这样：

![img](https://pic2.zhimg.com/80/v2-2ea9b68cc27a4a15794b7f8986cc9e75_720w.jpg)

```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前端培训”的问题，欢迎咨询千锋教育在线名师。千锋已有十余年的培训经验，课程大纲更科学更专业，有针对零基础的就业班，有针对想提升技术的提升班，高品质课程助理你实现梦想。