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