首页 > 代码库 > css渐变
css渐变
常这样去定义一个渐变的div:
渐变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%);
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。