控件的渐变色

需要注意的地方:

• 设置渐变色最好要正常状态与激活状态, 如hover前后呼应, 否则看起来非常的诡异
• 需要适配不同的环境, 否则同一份代码在不同的浏览器中可能会失效
  • 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');
 }

参数分析:

• 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不同的是, 这个方法将渐变方式直接写在了函数名中, linear
  • top: 表示起始位置, 终止位置是相对的位置
    • 如: top起始, bottom终止
    • left起始, right终止
    • left top起始, right bottom终止
  • 后面两个是颜色的起始和终止

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

  • IE浏览器不能通过background属性直接使用渐变色, 而是需要使用它们的DX渲染, 因此函数如上所示
  • 本人用的是Mac, 所以没有测试IE浏览器的