在css中，有时我们需要实现如下图所示的，背景渐变的效果。这就需要使用的linear-gradient 来实现这种效果

现在我们就来看一下如何解决这个问题

假设我们有一条基本的垂直线性渐变,颜色从 #fb3 过渡到 #58a

代码如下：

这样就可以实现背景颜色渐变的div。

我们可以试着把这两个色标拉近一点

修改background的值为background: linear-gradient(#fb3 20%, #58a 80%);

如果仔细分析我们可以看到，现在容器顶部的20%区域被填充为 #fb3实色,而底部20%区域被 填充为 #58a 实色。真正的渐变只出现在容器 60% 的高度区域。如果我们 把两个色标继续拉近(分别改为 40% 和 60%,参见图 2-22),那真正的渐变 区域就变得更窄了。你是不是开始好奇,如果我们把两个色标重合在一起, 会发生什么?

background: linear-gradient(#fb3 50%, #58a 50%);

此时的效果如下。