CSS3渐变效果：双色背景

原理

渐变色是CSS3新增属性，可以实现很多特殊效果。以前只能使用图片实现的效果，现在用渐变色也可以实现了。

linear-gradient语法：

linear-gradient( [ || ,]? ,  [, ]* )

说明：

• 渐变起始点，分为如下八种。
  

  

• 渐变角度，可以指定角度。
  

  

• 色阶，可以指定多个，可以同时为色阶指定范围（色阶之间使用逗号间隔，色阶的颜色与范围使用空格间隔）。

与二选一，可以多个

分析

• 渐变方向角度是120deg
• 色阶有两个：从0到100px是#989898；从100px到结束是#5C5C5C。所以，CSS3渐变代码为linear-gradient(120deg,#989898 100px,#5C5C5C 100px)

代码

• HTML

• 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);  
   }

• 效果

实践

大家试着实现一下其他两个吧。