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

<！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> 脚本之家（jb51.net）提供JavaScript/CSS特效代码。 脚本之家各类编程源码、提供各类编程源码 脚本之家（jb51.net）jb51.net脚本之家<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需刷新才能执行]