资深CSS潜水员写的色阶效果
效果演示：资深CSS潜水员写的色阶效果演示，考虑到兼容性，因此代码写的有水平，也较复杂，考虑的比较周全，没有用什么任何的图片，兼容性也不错。
当前位置：编程学习 > JS >>
答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS色阶</title>
<style type="text/css">
ul,li,dt,dl,dd,ol,li{ margin:0; padding:0; list-style:none;}
.cl{clear:both; height:0; line-height:0; font-size:0; overflow:hidden;}
.color_step{ height:58px;}
.color_step ul,.color_step ol{height:25px; position:relative; min-width:350px; width:100%;}
.color_step ul.shadow{filter:Alpha(Opacity=12); opacity:0.12;}
.color_step ul li{border-right:1px solid #fff; border-left:1px solid #fff; float:left; height:23px; width:10.5%;}
.color_step ul li em{ background:#fff; display:block; float:left; filter:Alpha(Opacity=28); height:11px; text-indent:-19999px; opacity:0.28; position: absolute; width:10.5%;}
.color_step ul.shadow li em{ text-indent:0;filter:Alpha(Opacity=0); opacity:0;}
.color_step ul li.color1{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#05af06), to(#3bba09));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #05af06, #3bba09);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #05af06, #3bba09);/* Opera 11.10+ */background: -o-linear-gradient(left, #05af06, #3bba09); /* IE 10 */ background: -ms-linear-gradient(left, #05af06, #3bba09); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#05af06, endColorStr=#3bba09);-webkit-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px; behavior: url(/jscss/demoimg/201202/pie.htc); border-left:none; }
.color_step ul li.color2{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#42bb08), to(#81c30a));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #42bb08, #81c30a);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #42bb08, #81c30a);/* Opera 11.10+ */background: -o-linear-gradient(left, #42bb08, #81c30a); /* IE 10 */ background: -ms-linear-gradient(left, #42bb08, #81c30a); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#42bb08, endColorStr=#81c30a); }
.color_step ul li.color3{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#87c30c), to(#b4c20d));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #87c30c, #b4c20d);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #87c30c, #b4c20d);/* Opera 11.10+ */background: -o-linear-gradient(left, #87c30c, #b4c20d); /* IE 10 */ background: -ms-linear-gradient(left, #87c30c, #b4c20d); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#87c30c, endColorStr=#b4c20d); }
.color_step ul li.color4{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#b5c30c), to(#d8c20d));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #b5c30c, #d8c20d);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #b5c30c, #d8c20d);/* Opera 11.10+ */background: -o-linear-gradient(left, #b5c30c, #d8c20d); /* IE 10 */ background: -ms-linear-gradient(left, #b5c30c, #d8c20d); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b5c30c, endColorStr=#d8c20d); }
.color_step ul li.color5{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#dcc10e), to(#edaf0e));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #dcc10e, #edaf0e);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #dcc10e, #edaf0e);/* Opera 11.10+ */background: -o-linear-gradient(left, #dcc10e, #edaf0e); /* IE 10 */ background: -ms-linear-gradient(left, #dcc10e, #edaf0e); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#dcc10e, endColorStr=#edaf0e); }
.color_step ul li.color6{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#eea90d), to(#f68908));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #eea90d, #f68908);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #eea90d, #f68908);/* Opera 11.10+ */background: -o-linear-gradient(left, #eea90d, #f68908); /* IE 10 */ background: -ms-linear-gradient(left, #eea90d, #f68908); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#eea90d, endColorStr=#f68908);}
.color_step ul li.color7{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#f7850b), to(#fc5c06));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #f7850b, #fc5c06);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #f7850b, #fc5c06);/* Opera 11.10+ */background: -o-linear-gradient(left, #f7850b, #fc5c06); /* IE 10 */ background: -ms-linear-gradient(left, #f7850b, #fc5c06); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#f7850b, endColorStr=#fc5c06);}
.color_step ul li.color8{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#fc5707), to(#fa2902));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #fc5707, #fa2902);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #fc5707, #fa2902);/* Opera 11.10+ */background: -o-linear-gradient(left, #fc5707, #fa2902); /* IE 10 */ background: -ms-linear-gradient(left, #fc5707, #fa2902); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#fc5707, endColorStr=#fa2902);}
.color_step ul li.color9{background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#fc2103), to(#ff0202));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #fc2103, #ff0202);/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #fc2103, #ff0202);/* Opera 11.10+ */background: -o-linear-gradient(left, #fc2103, #ff0202); /* IE 10 */ background: -ms-linear-gradient(left, #fc2103, #ff0202); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#fc2103, endColorStr=#ff0202);-webkit-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0; behavior: url(/jscss/demoimg/201202/pie.htc); border-right:none; }
/*shadow style*/
.color_step ul li.color01{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#05af06), to(#f5f5f5));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #05af06, #f5f5f5);/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #05af06, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #05af06, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #05af06, #f5f5f5); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#05af06, endColorStr=#f5f5f5); -webkit-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px; behavior: url(/jscss/demoimg/201202/pie.htc); border-left:none;}
.color_step ul li.color02{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#42bb08), to(#f5f5f5));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #42bb08, #f5f5f5);/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #42bb08, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #42bb08, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #42bb08, #f5f5f5); /* IE < 10 */ /* 注意：这一行必须写在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#42bb08, endColorStr=#f5f5f5); }
.color_step ul li.color03{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#87c30c), to(#f5f5f5));/* Webkit: Safari 5.1+, 上一个：CSS3圆环倒计时效果，IE9以上运行
下一个：CSS滑动门代码集
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思