原理

漸變色是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);  
   }

• 效果

實踐

大家試著實現一下其他兩個吧。