background linear-gradient
下面代码，大家都会用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background linear-gradient多色参数的使用</title>
<style>
#grad1 {
height: 200px;
width:100%;
background: linear-gradient(to right,red,yellow,blue,pink); /* 标准语法 (必须在最后) */
}
</style>
</head>
<body>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>下面代码，可能很多人没搞清楚怎么回事：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background linear-gradient多色参数的使用</title>
<style>
#grad1 {
height: 200px;
width:100%;
background: linear-gradient(to right,red 20%,yellow 20%, blue 80%,red 80%); /* 标准语法 (必须在最后) */
}
</style>
</head>
<body>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>运行一下看看效果吧。
其实：
linear-gradient的数值区，是起、止位置。
linear-gradient(方向，色1 止位，色2 起位，色2 止位，色3 起位，色3 止位，……，末色 起位)
懂了？
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
