需要注意的地方:

• 設(shè)置漸變色最好要正常狀態(tài)與激活狀態(tài), 如hover前后呼應(yīng), 否則看起來非常的詭異
• 需要適配不同的環(huán)境, 否則同一份代碼在不同的瀏覽器中可能會失效
  • webkit: Safari和Chrome
  • moz: Firefox
  • Mircrosoft: IE, 感覺最惡心的瀏覽器

代碼如下

 .black {
     color: #008000;
     border: solid 1px #333;
     background: white;
     background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));          background: -moz-linear-gradient(top, #666, #000);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');
 }
 
 .black:hover {
     color: #666; 
     background: -webkit-gradient(linear, left top, right bottom, from(#444), to(#000));
     background: -moz-linear-gradient(top, #000, #444);  
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');
 }

參數(shù)分析:

• Safari瀏覽器: background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));

  • linear: 顏色漸變的方式, 線性
  • left top: 顏色漸變的起始位置
  • left bottom: 顏色漸變的終止位置
  • from: 顏色漸變的起始顏色
  • end: 顏色漸變的終止顏色

• FireFox瀏覽器: -moz-linear-gradient(top, #666, #000);

  • 與webkit不同的是, 這個(gè)方法將漸變方式直接寫在了函數(shù)名中, linear
  • top: 表示起始位置, 終止位置是相對的位置
    • 如: top起始, bottom終止
    • left起始, right終止
    • left top起始, right bottom終止
  • 后面兩個(gè)是顏色的起始和終止

• IE:
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');

  • IE瀏覽器不能通過background屬性直接使用漸變色, 而是需要使用它們的DX渲染, 因此函數(shù)如上所示
  • 本人用的是Mac, 所以沒有測試IE瀏覽器的