您當(dāng)前位置：首頁(yè) > web前端 > 特效 > CSS色階特效代碼，注釋豐富并兼容各大瀏覽器

CSS色階特效代碼，注釋豐富并兼容各大瀏覽器

來(lái)源：程序員人生發(fā)布時(shí)間：2013-12-28 23:18:22 閱讀次數(shù)：4022次

　　在網(wǎng)上看到的CSS色階特效代碼，小編看了一下，感覺(jué)有以下特點(diǎn)：

　　1、代碼注釋豐富，不管您是新手還是老鳥(niǎo)，都可以很快理解作者的代碼。

　　2、兼容性強(qiáng)，從第一條就可以看出來(lái)了，釋義中關(guān)于火狐、IE、Chrome、Opera等瀏覽器描寫(xiě)有很多。

　　3、純CSS，無(wú)圖片。

　　演示：

<!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;}/******************************************************** StyleName：color_step* Description：color step style* Create：Linda****************************** color_step start********************************/.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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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 */ /* 注意：這一行必須寫(xiě)在最后 */ 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+, Chrome 10+ */ background: -webkit-linear-gradient(top, #87c30c, #f5f5f5);/* Firefox 3.6+ */background: -moz-linear-gradient(top, #87c30c, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #87c30c, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #87c30c, #f5f5f5); /* IE < 10 */ /* 注意：這一行必須寫(xiě)在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#87c30c, endColorStr=#f5f5f5); }.color_step ul li.color04{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b5c30c), to(#f5f5f5));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #b5c30c, #f5f5f5);/* Firefox 3.6+ */background: -moz-linear-gradient(top, #b5c30c, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #b5c30c, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #b5c30c, #f5f5f5); /* IE < 10 */ /* 注意：這一行必須寫(xiě)在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#b5c30c, endColorStr=#f5f5f5); }.color_step ul li.color05{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dcc10e), to(#f5f5f5));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #dcc10e, #f5f5f5);/* Firefox 3.6+ */background: -moz-linear-gradient(top, #dcc10e, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #dcc10e, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #dcc10e, #f5f5f5); /* IE < 10 */ /* 注意：這一行必須寫(xiě)在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#dcc10e, endColorStr=#f5f5f5); }.color_step ul li.color06{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eea90d), to(#f5f5f5));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #eea90d, #f5f5f5);/* Firefox 3.6+ */background: -moz-linear-gradient(top, #eea90d, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #eea90d, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #eea90d, #f5f5f5); /* IE < 10 */ /* 注意：這一行必須寫(xiě)在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#eea90d, endColorStr=#f5f5f5);}.color_step ul li.color07{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7850b), to(#f5f5f5));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #f7850b, #f5f5f5);/* Firefox 3.6+ */background: -moz-linear-gradient(top, #f7850b, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #f7850b, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #f7850b, #f5f5f5); /* IE < 10 */ /* 注意：這一行必須寫(xiě)在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#f7850b, endColorStr=#f5f5f5);}.color_step ul li.color08{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fc5707), to(#f5f5f5));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #fc5707, #f5f5f5);/* Firefox 3.6+ */background: -moz-linear-gradient(top, #fc5707, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #fc5707, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #fc5707, #f5f5f5); /* IE < 10 */ /* 注意：這一行必須寫(xiě)在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#fc5707, endColorStr=#f5f5f5);}.color_step ul li.color09{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fc2103), to(#f5f5f5));/* Webkit: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #fc2103, #f5f5f5);/* Firefox 3.6+ */background: -moz-linear-gradient(top, #fc2103, #f5f5f5);/* Opera 11.10+ */background: -o-linear-gradient(top, #fc2103, #f5f5f5); /* IE 10 */ background: -ms-linear-gradient(top, #fc2103, #f5f5f5); /* IE < 10 */ /* 注意：這一行必須寫(xiě)在最后 */ FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#fc2103, endColorStr=#f5f5f5); -webkit-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0; behavior: url(/jscss/demoimg/201202/pie.htc); border-right:none;}.color_step ol{ color:#777; font:11px/1 Arial, Helvetica, sans-serif; top:-19px; padding:0 0 0 5px; width:100%; }.color_step ol li{ float:left; width:21.5%;}.color_step ol li.last{ text-align:right; width:9.2%;}--></style></head><body><div class="color_step"><ul><li class="color1"><em>Lowerst</em></li><li class="color2"><em>Lower</em></li><li class="color3"><em>Lower</em></li><li class="color4"><em>Moderate</em></li><li class="color5"><em>Moderate</em></li><li class="color6"><em>Moderate</em></li><li class="color7"><em>Higher</em></li><li class="color8"><em>Higher</em></li><li class="color9"><em>Heighest</em></li></ul><ul class="shadow"><li class="color01"><em>Lowerst</em></li><li class="color02"><em>Lower</em></li><li class="color03"><em>Lower</em></li><li class="color04"><em>Moderate</em></li><li class="color05"><em>Moderate</em></li><li class="color06"><em>Moderate</em></li><li class="color07"><em>Higher</em></li><li class="color08"><em>Higher</em></li><li class="color09"><em>Heighest</em></li></ul><ol><li>Lowerst</li><li>Lower</li><li>Moderate</li><li>Higher</li><li class="last">Heighest</li></ol></div><div class="cl"></div></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></div>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 沒(méi)錢(qián)，沒(méi)技術(shù)，站長(zhǎng)應(yīng)該如何運(yùn)營(yíng)網(wǎng)站？(三)

下一篇 Access入門(mén)教程 11.4 調(diào)整標(biāo)簽的位置和大小[2]

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

CSS色階特效代碼，注釋豐富并兼容各大瀏覽器