在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%);
此时的效果如下。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
