# 渐变
*通过css渐变，可以在不使用任何图片的情况下创建非常棒的效果。本节内容，一起看一下css中的各种渐变。*
假设公司的UI递过来一份web设计稿让你完成。主页面的header是一段文字和一个按钮，背景是一个渐变色的背景图，你如何去完成这个header呢？
如果你没有用过css渐变，你可能会想到用图片处理软件创建一个背景图，然后使用`background`属性设置header的背景图片来完成任务。但是css提供了`linear-gradient`，可以很方便的解决这个问题。
渐变本质上是一张图片，可以被用在任何可以使用图片的地方来代替图片，例如`background-image`。
css可以创建多种渐变，接下来我将详细介绍各种渐变。
## 一.线性渐变
`linear-gradient()`函数可以通过两个或者多个颜色生成一张图片。它接受多个参数，你可以将一些颜色传递给它，它会将这些颜色均匀的设置在背景的相应位置，然后进行均匀渐变，生成一张图片。下面的例子设置了`background: linear-gradient(red, orange, yellow, green, cyan, blue, purple);`。
默认的颜色渐变方向是从上至下的。你可以通过`to `更改默认的渐变方向。
```css
.ele {
background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
}
```
通过`to right`指定渐变方向是从左至右的。指定两个方向可以将渐变方向改成对角线渐变。
```css
.ele {
background: linear-gradient(to bottom right, red, orange, yellow, green, cyan, blue, purple);
}
```
还可以通过角度和位置更改渐变的位置和方向。
```css
.ele {
background: linear-gradient(45deg, black 30%, white);
}
```
`45deg`表示将渐变的方向旋转45度，从`black`颜色开始，一直到`30%`的位置开始慢慢渐变成`white`。
指定角度和渐变开始的位置也支持设置多种颜色。
```css
.ele {
background: linear-gradient(45deg, darkred 20%, crimson, darkorange 60%, gold, bisque);
}
```
上面的代码表示渐变的方向是45度，颜色开始是`darkred`，在`20%`位置时渐变到`crimson`，再渐变到`darkorange`，然后以`darkorange`一直持续到`60%`的位置再开始渐变到`gold`，最后渐变到`bisque`。
## 二.径向渐变
**径向渐变**指的是从某一点向四周扩散渐变。使用`radial-gradient()`函数创建径向渐变图片。
```css
.ele {
background: radial-gradient(white, black);
}
```
和`linear-gradient`一样，可以指定多个渐变色和渐变位置。
```css
.my-element {
background: radial-gradient(darkred 20%, crimson, darkorange 60%, gold, bisque);
}
```
## 三.旋转渐变（Conic gradient）
旋转渐变有一个中心点，默认从上方开始，绕着中心点旋转渐变。
```css
.ele {
background: conic-gradient(white, black);
}
```
可以指定中心位置，和开始渐变的角度。
```css
.ele {
background: conic-gradient(from 10deg at 20% 30%, white, black);
}
```
和其他渐变用一样，可以指定渐变颜色位置、设置多个颜色。可以用这个绘制饼图。
## 四.重复和混合
每种渐变都有对应的重复类型。分别是`repeating-linear-gradient()`、`repeating-radial-gradient()`和`repeating-conic-gradient()`。它们和非重复渐变类似，接受的参数也相同，区别是它们可以重复模式去填充盒子。
如果你的渐变没有重复，那么可能是因为你没有设置颜色的区域长度。
```css
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
```
## 附：资源
- [Conic.css](https://www.conic.style/)-旋转渐变的一些模板参考
- [MDN渐变](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients)-mdn渐变教程
- [渐变生成器](https://www.colorzilla.com/gradient-editor/)
（完）