CSS 渐变背景的6个演示代码

更新时间：2009年10月24日 11:53:26 作者：

CSS渐变背景的六个示例，个人觉得这是非常实用的一个常用技巧，不使用任何图片实现Div背景渐变，而且兼容IE和FF2，以后想要类似的效果，可有的参考了。

<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'> <html> <head> <meta http-equiv=content-type content="text/html; charset=gbk"> <title>CSS渐变背景</title> <script> var setGradient = (function(){     var p_dCanvas = document.createElement('canvas');     var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function');     var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null;     var p_isIE = /*@cc_on!@*/false; try{ p_dCtx.canvas.toDataURL() }catch(err){ p_useCanvas = false ; };     if(p_useCanvas){      return function (dEl , sColor1 , sColor2 , bRepeatY ){             if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);             if(!dEl) return false;             var nW = dEl.offsetWidth;             var nH = dEl.offsetHeight;             p_dCanvas.width = nW;             p_dCanvas.height = nH;             var dGradient;             var sRepeat;             if(bRepeatY){                 dGradient = p_dCtx.createLinearGradient(0,0,nW,0);                 sRepeat = 'repeat-y';             }else{                 dGradient = p_dCtx.createLinearGradient(0,0,0,nH);                 sRepeat = 'repeat-x';             }                                  dGradient.addColorStop(0,sColor1);             dGradient.addColorStop(1,sColor2);                                          p_dCtx.fillStyle = dGradient ;             p_dCtx.fillRect(0,0,nW,nH);             var sDataUrl = p_dCtx.canvas.toDataURL('image/png');                          with(dEl.style){                 backgroundRepeat = sRepeat;                 backgroundImage = 'url(' + sDataUrl + ')';                 backgroundColor = sColor2;             };      }     }else if(p_isIE){                  p_dCanvas = p_useCanvas = p_dCtx = null;                 return function (dEl , sColor1 , sColor2 , bRepeatY){             if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);             if(!dEl) return false;             dEl.style.zoom = 1;             var sF = dEl.currentStyle.filter;             dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient(    GradientType=', +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join('');     };          }else{         p_dCanvas = p_useCanvas = p_dCtx = null;         return function(dEl , sColor1 , sColor2 ){                          if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);             if(!dEl) return false;             with(dEl.style){              backgroundColor = sColor2;             };         }     } })(); </script> <style> body{font:0.75em/1.4 Arial;text-align:left;margin:20px;} hr{clear:both;visibility:hidden;} xmp{font:12px/12px "Courier New";background:#fff;color:#666; border:solid 1px #ccc;} div.example{ border:solid 1px #555;margin:0 20px 20px 0;float:left; display:inline;margin:1em;background:#fff;width:300px;padding:40px;color:#222;font:xx-small/1.2 "Tahoma";text-align:justify;} </style> <body> <div id="example1" class="example">脚本之家（jb51.net）提供JavaScript/CSS特效代码。</div> <div id="example2" class="example">脚本之家各类编程源码、 </div> <div id="example3" class="example">提供各类编程源码</div> <div id="example4" class="example">脚本之家（jb51.net） </div> <div id="example5" class="example">jb51.net </div> <div id="example6" class="example">脚本之家 </div> <script> setGradient('example1','#4ddbbe','#d449cc',1); setGradient('example2','#46ddbd','#d8b617',0); setGradient('example3','#c81fc1','#bf445f',1); setGradient('example4','#2285e5','#d769eb',0); setGradient('example5','#8b4286','#eac87d',1); setGradient('example6','black','white',0); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

弹出提示的效果代码
脚本之家模拟弹出提示效果代码
2008-05-05
网页打开自动最大化的js代码
有时候我们需要当页面打开时，自动最大化，一来方便用户浏览，而且快速将页面呈现给大家
2012-08-08
CSS 直方图布局示例
利用CSS布局一个直方图，可能比较实用，主要是考验使用CSS布局的能力，看看效果吧。
2009-11-11
javascript用层模拟可移动的小窗口
用层模拟小窗口实例效果代码
2008-05-05
js实现的层变换效果
js实现的层变换效果...
2007-09-09
CSS 渐变背景的6个演示代码
CSS渐变背景的六个示例，个人觉得这是非常实用的一个常用技巧，不使用任何图片实现Div背景渐变，而且兼容IE和FF2，以后想要类似的效果，可有的参考了。
2009-10-10
JS实现简洁(隔行换色、高亮显示)表格特效
JS实现的表格，使用JavaScript编写实现一个简洁的表格，大家参考一下，加入了隔行换色，并且鼠标滑过时还有高亮显示特效，我看到了都目瞪口呆确实相当不错，有兴趣的朋友可以参考下
2012-12-12
图片与文字半透明效果鼠标移上不透明
图片与文字结合的半透明效果，在正常状态下，一张图片的上面显示文字，为了区分背景，文字下方又重新布置了一个DIV
2009-10-10
图片与JavaScript配合做出个性滚动条
如果你想定制出一个漂亮的滚动条的话,这个JS特效可能会适合你,不过代码稍嫌麻烦些,但效果真的不错,代码含有中文注释,学习也是不错的,希望朋友们喜欢.
2009-10-10
CSS Filter背景透明提示
使用CSS的Filter滤镜实现的小效果，鼠标悬停时激活本效果，是一个半透明的图片提示层，本代码演示了核心的实现方法，你可以举一返三，作出更强大的效果来。
2009-11-11