JS+CSS实现无图片圆角
js+css实现兼容ie和ff的圆角效果http://www.agoit.com/upload/attachment/139480/d684577d-2496-3423-aa3a-7200fcc41725.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JS+CSS实现无图片圆角</title><style>body{background:black}td{font-size:9pt}</style><!---js部分开始---><script>function setcorner(id,r,bo,bg) {switch(id){case 1: x=parseInt("-"+r);xx=-1;y=parseInt("-"+r);yy=-1;breakcase 2: x=parseInt("-"+r);xx=-1;y=1;yy=r;breakcase 3: x=1;xx=r;y=parseInt("-"+r);yy=-1;breakcase 4: x=1;xx=r;y=1;yy=r;break}corner_html="<div style=\"width:"+r+"px;height:"+r+"px;overflow:hidden\">"for(i=x;i<=xx;i++) {for(ii=y;ii<=yy;ii++) {rr=i*i+ii*ii-r*rif(rr<0){color=bg}else{color=""}if(Math.abs(rr)<r){color=bo}corner_html+="<div style=\"float:left;width:1px;height:1px;overflow:hidden;background:"+color+"\"></div>"}}corner_html+="</div>"return(corner_html)}function corner(){corner_table=document.all.tags("table")for(box_i=0;box_i<corner_table.length;box_i++){if(corner_table.id=="box"){corner_table.id="box_"+box_i}}for(corner_i=0;corner_i<corner_table.length;corner_i++) {if(corner_table.id=="corner"){corner_table.id="corner_"+corner_icorner_id=document.getElementById(corner_table.id)style=eval(corner_id.className)if(style.length==3){switch(style){case "black": bo="#666666";bg="#999999";breakcase "blue": bo="#0000ff";bg="#9999ff";breakcase "red": bo="#FF3333";bg="#ff9999";breakcase "green": bo="#009900";bg="#66cc33";breakcase "yellow": bo="#cc9900";bg="#ff9966";breakcase "pink": bo="#cc33cc";bg="#ff99ff";break}bc=style}else{bo=style;bg=style;bc=style}size=stylecorner_img="<img width=1px height=1px>"corner_id.insertRow(0)corner_id.insertRow(2)corner_id.rows.insertCell(0)corner_id.rows.insertCell(0)corner_id.rows.insertCell(0)corner_id.rows.insertCell(0)corner_id.rows.insertCell(2)corner_id.rows.insertCell(0)corner_id.rows.insertCell(0)corner_id.rows.insertCell(0)corner_id.rows.cells.innerHTML=corner_imgcorner_id.rows.cells.innerHTML=corner_imgcorner_id.rows.cells.innerHTML=corner_imgcorner_id.rows.cells.innerHTML=corner_imgcorner_id.rows.cells.innerHTML=setcorner(1,size,bo,bg)corner_id.rows.cells.innerHTML=setcorner(2,size,bo,bg)corner_id.rows.cells.innerHTML=setcorner(3,size,bo,bg)corner_id.rows.cells.innerHTML=setcorner(4,size,bo,bg)corner_id.rows.cells.style.background=bccorner_id.rows.cells.style.background=bgcorner_id.rows.cells.style.background=bgcorner_id.rows.cells.style.background=bgcorner_id.rows.cells.style.background=bgcorner_id.rows.cells.style.borderTop="1px solid "+bocorner_id.rows.cells.style.borderLeft="1px solid "+bocorner_id.rows.cells.style.borderRight="1px solid "+bocorner_id.rows.cells.style.borderBottom="1px solid "+bobox_id=eval("box_"+(corner_i+1))box_style=eval(box_id.className)if(box_style==0){box_id.rows.style.display="none"}box_id.rows.style.height="18px"box_id.rows.style.fontWeight="bold"box_id.rows.style.color="#ffffff"box_id.rows.style.background=bgbox_id.rows.style.background="#ffffff"box_id.rows.cells.style.border=box_style+"px solid "+bo}}}</script><!---js部分结束---><head><body><table cellpadding=0 cellspacing=0 id=corner class=""><tr><td><table cellpadding=2 cellspacing=0 id=box class="" width=250 height=100><tr><td>逍遥狼智能圆角</td></tr><tr><td valign=top>逍遥狼智能圆角:<Br>class="": <Br>依次为：[圆角半径大小，颜色样式，背景（感觉不是很必要）]<Br>class=""：<Br>依次为：[是否显示内容标题，是否显示内容边框]（为配个整体效果而设定）<Br></td></tr></table></td></tr></table><script>corner()</script></body></html>
效果如图:
http://www.agoit.com/upload/attachment/139480/d684577d-2496-3423-aa3a-7200fcc41725.png
页:
[1]