在css中，有时我们需要实现如下图所示的，背景渐变的效果。这就需要使用的linear-gradient来实现这种效果
现在我们就来看一下如何解决这个问题
假设我们有一条基本的垂直线性渐变,颜色从
#fb3过渡到
#58a
代码如下：
Document
div{
background: linear-gradient(#fb3, #58a);
width: 200px;
height: 100px;
}
这样就可以实现背景颜色渐变的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%);
此时的效果如下。
