css不用圖片美化按鈕

2020-10-23 18:35:24

字體：大中小

供稿：網(wǎng)友

<html> <style> .tb{width:100%;height:1px;overflow:hidden;background:rgb(250,100,0);margin:0 1px;} .lr{width:100%;height:20px;overflow:hidden;border-left:1px solid rgb(250,100,0);border-right:1px  solid rgb(250,100,0);} .bg{width:100%;height:20px;overflow:hidden;} .button{position:relative;width:100%;height:20px;top:-20px;font- size:9pt;border:0;background:none;} </style> <div style="float:left;width:100;"> <div   id="iwvjtn8m0"   class=tb></div> <div   id="iwvjtn8m0"   class=lr> <div   id="iwvjtn8m0"   class=bg id=bg></div> <input class=button id=button type=button value="美化了的按鈕"> </div> <div   id="iwvjtn8m0"   class=tb></div> </div> <script> function rgb(){ ID=arguments[0] oRGB=eval(arguments[1]) nRGB=eval(arguments[2]) var IMG="" for(i=20;i>0;i=i-2){ RGB="rgb("+(oRGB[0]-1)+","+(oRGB[1]-1)+","+(oRGB[2]-1)+")" IMG+="<img style=/"width:100%;height:1px;background:"+RGB+"/">"            } for(i=20;i>0;i=i-2){ RGB="rgb("+(nRGB[0]-1)+","+(nRGB[1]-1)+","+(nRGB[2]-1)+")" IMG+="<img style=/"width:100%;height:1px;background:"+RGB+"/">"            } eval(ID+".innerHTML=IMG") } rgb("bg",[255,180,20],[255,140,20]) button.onmouseover=function(){rgb("bg",[255,200,20],[255,160,20])} button.onmouseout=function(){rgb("bg",[255,180,20],[255,140,20])} </script>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

上一篇：IE對CSS樣式表的限制分析與解決方案

下一篇：用CSS實現(xiàn)的一張圖完成的按鈕效果