css-tutorial/chapters/020 渐变.md

# 渐变

*通过css渐变，可以在不使用任何图片的情况下创建非常棒的效果。本节内容，一起看一下css中的各种渐变。*

假设公司的UI递过来一份web设计稿让你完成。主页面的header是一段文字和一个按钮，背景是一个渐变色的背景图，你如何去完成这个header呢？

![css渐变](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/134.jpg)

如果你没有用过css渐变，你可能会想到用图片处理软件创建一个背景图，然后使用`background`属性设置header的背景图片来完成任务。但是css提供了`linear-gradient`，可以很方便的解决这个问题。
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_01" src="https://codepen.io/AhCola/embed/MWowwBd?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/MWowwBd">
  020 Gradient_01</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

渐变本质上是一张图片，可以被用在任何可以使用图片的地方来代替图片，例如`background-image`。

css可以创建多种渐变，接下来我将详细介绍各种渐变。

## 一.线性渐变

`linear-gradient()`函数可以通过两个或者多个颜色生成一张图片。它接受多个参数，你可以将一些颜色传递给它，它会将这些颜色均匀的设置在背景的相应位置，然后进行均匀渐变，生成一张图片。下面的例子设置了`background: linear-gradient(red, orange, yellow, green, cyan, blue, purple);`。
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_02" src="https://codepen.io/AhCola/embed/JjJddQR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/JjJddQR">
  020 Gradient_02</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

默认的颜色渐变方向是从上至下的。你可以通过`to <direction>`更改默认的渐变方向。
```css
.ele {
    background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_03" src="https://codepen.io/AhCola/embed/OJgVyVo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/OJgVyVo">
  020 Gradient_03</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

通过`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`。
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_04" src="https://codepen.io/AhCola/embed/BaZNoQv?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/BaZNoQv">
  020 Gradient_04</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

指定角度和渐变开始的位置也支持设置多种颜色。
```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);
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_05" src="https://codepen.io/AhCola/embed/MWowava?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/MWowava">
  020 Gradient_05</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

和`linear-gradient`一样，可以指定多个渐变色和渐变位置。
```css
.my-element {
	background: radial-gradient(darkred 20%, crimson, darkorange 60%, gold, bisque);
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_06" src="https://codepen.io/AhCola/embed/mdwJeBG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/mdwJeBG">
  020 Gradient_06</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 三.旋转渐变（Conic gradient）

旋转渐变有一个中心点，默认从上方开始，绕着中心点旋转渐变。
```css
.ele {
    background: conic-gradient(white, black);
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_07" src="https://codepen.io/AhCola/embed/yLXNYqO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/yLXNYqO">
  020 Gradient_07</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

可以指定中心位置，和开始渐变的角度。
```css
.ele {
	background: conic-gradient(from 10deg at 20% 30%, white, black);
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_08" src="https://codepen.io/AhCola/embed/NWgqGLK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/NWgqGLK">
  020 Gradient_08</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

和其他渐变用一样，可以指定渐变颜色位置、设置多个颜色。可以用这个绘制饼图。
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_09" src="https://codepen.io/AhCola/embed/jOwPbeb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/jOwPbeb">
  020 Gradient_09</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 四.重复和混合

每种渐变都有对应的重复类型。分别是`repeating-linear-gradient()`、`repeating-radial-gradient()`和`repeating-conic-gradient()`。它们和非重复渐变类似，接受的参数也相同，区别是它们可以重复模式去填充盒子。

如果你的渐变没有重复，那么可能是因为你没有设置颜色的区域长度。
```css
.my-element {
    background: repeating-linear-gradient(
        45deg,
        red,
        red 30px,
        white 30px,
        white 60px
    );
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_10" src="https://codepen.io/AhCola/embed/powJjGb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/powJjGb">
  020 Gradient_10</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 附：资源

- [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/)



（完）