原理
渐变色是CSS3新增属性，可以实现很多特殊效果。以前只能使用图片实现的效果，现在用渐变色也可以实现了。
linear-gradient语法：
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
说明：
-
<point>渐变起始点，分为如下八种。
-
<angle>渐变角度，可以指定角度。
<stop>色阶，可以指定多个，可以同时为色阶指定范围（色阶之间使用逗号间隔，色阶的颜色与范围使用空格间隔）。
<point>与<angle>二选一，<stop>可以多个
分析
- 渐变方向角度是
120deg - 色阶有两个：从0到
100px是#989898；从100px到结束是#5C5C5C。所以，CSS3渐变代码为linear-gradient(120deg,#989898 100px,#5C5C5C 100px)
代码
- HTML
<div class="login"></div>
- CSS
.login{
height:140px;
width:200px;
border:3px outset #D3D3D3;
border-radius:12px;
background-image:-webkit-linear-gradient(120deg,#989898 100px,#5C5C5C 100px);
background-image:-moz-linear-gradient(120deg,#989898 100px,#5C5C5C 100px);
background-image:-ms-linear-gradient(120deg,#989898 100px,#5C5C5C 100px);
background-image:-o-linear-gradient(120deg,#989898 100px,#5C5C5C 100px);
background-image:linear-gradient(120deg,#989898 100px,#5C5C5C 100px);
}
- 效果
实践
大家试着实现一下其他两个吧。
