css不用圖片美化按鈕

更新時間：2008年05月15日 23:32:09 作者：

不用圖片用css實現(xiàn)按鈕的美化效果代碼

<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="km8ioqg"   class=tb></div> <div   id="2agu8ms"   class=lr> <div   id="kkoe0gk"   class=bg id=bg></div> <input class=button id=button type=button value="美化了的按鈕"> </div> <div   id="g8gmcgy"   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í)行]

相關(guān)文章

css ie6 ie7 ff的CSS hack使用技巧
關(guān)于CSS HACK的文章在jb51.net中提及的也很多。CSSer必須掌握的關(guān)于IE6、IE7和FF的最簡單的hack技巧。
2008-09-09
讓網(wǎng)頁框架透明底部對齊的代碼
2008-01-01
div層跨越iframe幀顯示在上面的解決方法附代碼
div iframe幀顯示問題
2008-08-08
關(guān)于margin-left的示例代碼
關(guān)于margin-left的示例代碼...
2007-05-05
3個效果超酷的FORM表單美化效果打包下載
3個效果超酷的FORM表單美化效果打包下載...
2007-09-09
html工作中表格<tbody>標(biāo)簽的使用技巧
公司大部分的項目都是基于BS結(jié)構(gòu)，UI設(shè)計階段做WEB原型頁面時要把各種交互效果實現(xiàn)出來，與真正的后臺編程不同，就用JS前臺編程來實現(xiàn)，讓程序員編程前知道要做成什么樣的效果就行了。
2008-09-09
css+table 1px邊框單元格
用css不用以前比較傳統(tǒng)的用表格背景+單元格背景實現(xiàn)的效果
2008-08-08
標(biāo)準(zhǔn)布局常見問題及解決辦法
需要標(biāo)準(zhǔn)布局的朋友，經(jīng)常會遇到一些問題，下面是一些布局問題
2008-11-11
css——之三行三列等高布局圖文教程
css——之三行三列等高布局圖文教程...
2007-04-04
css強(qiáng)制換行 css強(qiáng)制不換行的css方法
更多的關(guān)于css強(qiáng)制換行 css強(qiáng)制不換行的css方法可以參考本站的內(nèi)容頁的文章控制.
2007-12-12