经常写CSS难的复杂的就害怕，不用怕，谈 渐变 不色变

渐变色背景，作用是啥，来来来，我来讲一下：第一点：设计感；第二点：识别度。

有啥渐变：1、线性的；2、径向的。

---

线性

linear-gradient() 函数：

指定方向：(to top, to right, to bottom right)等等

角度：(45deg, 90deg)等等

---

径向

沿着半径的方向。

不太理解什么叫径向，这里有解释： 想象一下，您手里拿着一个圆滚滚的球体，从球心出发，随便画一条到球表面的直线，这条直线的方向就是径向。更具体地说，在地表，我们通常把以某一点为中心点的切平面中，通过该点的直线的方向称为径向。

radial-gradient()

(circle, ellipse) 大小和位置

从中心点荡漾开来。

多个

用,这逗号分隔多个背景。

前的背景会覆盖后的背景上。

可组合线性渐变、径向渐变、纯色背景。

tips

用 transparent 透明色 做融合效果。

用 rgba 颜色 做透明度。

用 px固定值 和 %百分比 去做渐变范围。

---

例子

上下 线性

background: linear-gradient(to bottom, #ff9a9e, #fad0c4);

线性 带角度的

background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd);

径向的 （即从圆心发射的）

background: radial-gradient(circle at center, #a1c4fd, #c2e9fb);

多个

background: 
  linear-gradient(to bottom, transparent, #fff 200px),
  radial-gradient(30% 150px at 70% 100px, rgba(0, 210, 255, 0.3), transparent);

再来

background: {
  linear-gradient(to bottom, transparent, #fff 300px),
  radial-gradient(20% 150px at 70% 230px, rgba(0, 210, 255, 0.2), transparent),
  radial-gradient(40% 180px at 80% 50px, rgba(249, 167, 176, 0.3), transparent),
  radial-gradient(50% 300px at 90% 100px, rgba(212, 230 241 0.8), transparent),
  radial-gradient(20% 150px at 0px 0px, rgba(162, 213, 239, 0.5), transparent),
  radial-gradient(30% 200px at 100px 50px, rgba(249, 167, 176, 0.5), transparent),
  #f5f5f5;
}