linear-gradient() 函数用于创建一个线性渐变的 “图像”。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>滑动的菜单</title>
<style type="text/css">
.box {
margin:0;
padding:0;
font-size:12px;
list-style:none;
width:120px;
float:left;
}
li {
width:80px;
line-height:20px;
height:20px;
margin:1px;
background-color:#ccc;
text-align:left;
border-radius:0 10px 10px 0;
border-left:3px solid #333;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}
li a {
display:block;
text-decoration:none;
font-size:12px;
padding-left:5px;
font-family:Arial;
font-weight:bold;
color:#666;
}
li:hover {
background-color:#f90;
width:100px;
-webkit-transition:all 200ms linear;
-moz-transition:all 200ms linear;
-o-transition:all 200ms linear;
transition:all 200ms linear;
}
li:hover a {
color:#FFF;
}
</style>
</head>
<body>
<ul class="box">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
<ul class="box">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
</ul>
<ul class="box">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</body>
</html>
Processed:
0.016, SQL:
9
