码迷,mamicode.com
首页 > Web开发 > 详细

css渐变

时间:2014-05-24 06:37:38      阅读:438      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   c   code   java   

常这样去定义一个渐变的div:

bubuko.com,布布扣
渐变1:(双色)
background: -moz-linear-gradient(top, #456d6c 0%, #32b66a 100%); /*适合 FF3.6+*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#456d6c), color-stop(100%,#32b66a)); /*适合 Chrome,Safari4+*/ background: -webkit-linear-gradient(top, #456d6c 0%,#32b66a 100%); /*适合Chrome10+,Safari5.1+*/ background: -o-linear-gradient(top, #456d6c 0%,#32b66a 100%); /*适合Opera 11.10+*/ background: -ms-linear-gradient(top, #456d6c 0%,#32b66a 100%); /*适合IE10+*/ background: linear-gradient(top, #456d6c 0%,#32b66a 100%); /*适合W3C*/ 

渐变2:(四色)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#02eae7, endColorstr=#02ea3e, GradientType=0 );   
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #02eae7), color-stop(50%, #02ea6f), color-stop(52%, #02ea3e), color-stop(100%, #f4f4f4));
  background-image: -webkit-linear-gradient(top, #02eae7 20%, #02ea6f 50%, #02ea3e 52%, #f4f4f4 100%);
  background-image: -moz-linear-gradient(top, #02eae7 20%, #02ea6f 50%, #02ea3e 52%, #f4f4f4 100%);
  background-image: -o-linear-gradient(top, #02eae7 20%, #02ea6f 50%, #02ea3e 52%, #f4f4f4 100%);
  background-image: linear-gradient(#02eae7 20%, #02ea6f 50%, #02ea3e 52%, #f4f4f4 100%);
原始:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ffffff, endColorstr=#eeeeee, GradientType=0 );   
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
  background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-image: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
bubuko.com,布布扣

 

css渐变,布布扣,bubuko.com

css渐变

标签:style   class   blog   c   code   java   

原文地址:http://www.cnblogs.com/shy1766IT/p/3736300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!