很好很强大的智能无图片实现圆角效果

很好很强大的智能无图片实现圆角效果,全部圆角效果都没有用到图片

运行代码框

<style> td{font-size:9pt;word-break: break-all} #corner{font-size:1px} #tit{height:20px;color:white;} #txt{font-size:9pt;line-height:150%;background:white;border-width:1px;border-style:solid} .l,.r,.tl,.tr,.bl,.br{width:3px} .t,.b,.tl,.tr,.bl,.br{height:3px} </style> <table cellpadding=2 cellspacing=0> <tr><td> <table id=corner class=black cellpadding=0 cellspacing=0 width=400> <tr> <td class=tl><a id=corner class=tl></a></td> <td class=t><a id=corner class=t></a></td> <td class=tr><a id=corner class=tr></a></td> </tr> <tr> <td class=l><a id=corner class=l></a></td> <td> <table id=box cellpadding=3 cellspacing=0 width=100%> <tr id=tit><td> <b>逍遥狼无图片智能圆角</b> </td></tr> <tr corner_style="display:"><td id=txt> 特点：<br> 1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br> 2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br> 3：兼容性好。<Br> </td></tr></table> </td> <td class=r><a id=corner class=r></a></td> </tr> <tr> <td class=bl><a id=corner class=bl></a></td> <td class=b><a id=corner class=b></a></td> <td class=br><a id=corner class=br></a></td> </tr> </table> </td></tr><tr><td> <table id=corner class=blue cellpadding=0 cellspacing=0 width=400> <tr> <td class=tl><a id=corner class=tl></a></td> <td class=t><a id=corner class=t></a></td> <td class=tr><a id=corner class=tr></a></td> </tr> <tr> <td class=l><a id=corner class=l></a></td> <td> <table id=box cellpadding=3 cellspacing=0 width=100%> <tr id=tit><td> <b>逍遥狼无图片智能圆角</b> </td></tr> <tr corner_style="display:"><td id=txt> 特点：<br> 1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br> 2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br> 3：兼容性好。<Br> </td></tr></table> </td> <td class=r><a id=corner class=r></a></td> </tr> <tr> <td class=bl><a id=corner class=bl></a></td> <td class=b><a id=corner class=b></a></td> <td class=br><a id=corner class=br></a></td> </tr> </table> </td></tr><tr><td> <table id=corner class=red cellpadding=0 cellspacing=0 width=400> <tr> <td class=tl><a id=corner class=tl></a></td> <td class=t><a id=corner class=t></a></td> <td class=tr><a id=corner class=tr></a></td> </tr> <tr> <td class=l><a id=corner class=l></a></td> <td> <table id=box cellpadding=3 cellspacing=0 width=100%> <tr id=tit><td> <b>逍遥狼无图片智能圆角</b> </td></tr> <tr corner_style="display:"><td id=txt> 特点：<br> 1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br> 2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br> 3：兼容性好。<Br> </td></tr></table> </td> <td class=r><a id=corner class=r></a></td> </tr> <tr> <td class=bl><a id=corner class=bl></a></td> <td class=b><a id=corner class=b></a></td> <td class=br><a id=corner class=br></a></td> </tr> </table> </td></tr><tr><td> <table id=corner class=green cellpadding=0 cellspacing=0 width=400> <tr> <td class=tl><a id=corner class=tl></a></td> <td class=t><a id=corner class=t></a></td> <td class=tr><a id=corner class=tr></a></td> </tr> <tr> <td class=l><a id=corner class=l></a></td> <td> <table id=box cellpadding=3 cellspacing=0 width=100%> <tr id=tit><td> <b>逍遥狼无图片智能圆角</b> </td></tr> <tr corner_style="display:"><td id=txt> 特点：<br> 1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br> 2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br> 3：兼容性好。<Br> </td></tr></table> </td> <td class=r><a id=corner class=r></a></td> </tr> <tr> <td class=bl><a id=corner class=bl></a></td> <td class=b><a id=corner class=b></a></td> <td class=br><a id=corner class=br></a></td> </tr> </table> </td></tr><tr><td> <table id=corner class=yellow cellpadding=0 cellspacing=0 width=400> <tr> <td class=tl><a id=corner class=tl></a></td> <td class=t><a id=corner class=t></a></td> <td class=tr><a id=corner class=tr></a></td> </tr> <tr> <td class=l><a id=corner class=l></a></td> <td> <table id=box cellpadding=3 cellspacing=0 width=100%> <tr id=tit><td> <b>逍遥狼无图片智能圆角</b> </td></tr> <tr corner_style="display:"><td id=txt> 特点：<br> 1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br> 2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br> 3：兼容性好。<Br> </td></tr></table> </td> <td class=r><a id=corner class=r></a></td> </tr> <tr> <td class=bl><a id=corner class=bl></a></td> <td class=b><a id=corner class=b></a></td> <td class=br><a id=corner class=br></a></td> </tr> </table> </td></tr><tr><td> <table id=corner class=pink cellpadding=0 cellspacing=0 width=400> <tr> <td class=tl><a id=corner class=tl></a></td> <td class=t><a id=corner class=t></a></td> <td class=tr><a id=corner class=tr></a></td> </tr> <tr> <td class=l><a id=corner class=l></a></td> <td> <table id=box cellpadding=3 cellspacing=0 width=100%> <tr id=tit><td> <b>逍遥狼无图片智能圆角</b> </td></tr> <tr corner_style="display:"><td id=txt> 特点：<br> 1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br> 2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br> 3：兼容性好。<Br> </td></tr></table> </td> <td class=r><a id=corner class=r></a></td> </tr> <tr> <td class=bl><a id=corner class=bl></a></td> <td class=b><a id=corner class=b></a></td> <td class=br><a id=corner class=br></a></td> </tr> </table> </td></tr></table> <script> function setcorner() { corner_table=document.all.tags("table") for(i=0;i<corner_table.length;i++) { if(corner_table[i].id=="corner") { mycorner=corner_table[i].getElementsByTagName("A") corner_style=corner_table[i].className if(corner_style=="black"){bo="#666666";bg="#999999"} if(corner_style=="blue"){bo="#0000ff";bg="#9999ff"} if(corner_style=="red"){bo="#FF3333";bg="#ff9999"} if(corner_style=="green"){bo="#009900";bg="#66cc33"} if(corner_style=="yellow"){bo="#cc9900";bg="#ff9966"} if(corner_style=="pink"){bo="#cc33cc";bg="#ff99ff"} corner_box=corner_table[i].getElementsByTagName("TABLE") for(ii=0;ii<corner_box.length;ii++) {if(corner_box[ii].id=="box"){corner_box=corner_box[ii];break}} corner_tit=corner_box.getElementsByTagName("TR") for(ii=0;ii<corner_tit.length;ii++) {if(corner_tit[ii].id=="tit"){corner_tit=corner_tit[ii];break}} corner_tit.style.background=bg corner_txt=corner_box.getElementsByTagName("TD") for(ii=0;ii<corner_txt.length;ii++) {if(corner_txt[ii].id=="txt"){corner_txt=corner_txt[ii];break}} corner_txt.style.borderColor=bo for(ii=0;ii<mycorner.length;ii++) { if(mycorner[ii].id=="corner") { postion=mycorner[ii] id=mycorner[ii].className if(id=="tl"){w=3,h=3} if(id=="tr"){w=3,h=3} if(id=="bl"){w=3,h=3} if(id=="br"){w=3,h=3} if(id=="t"){w=corner_box.offsetWidth,h=3} if(id=="b"){w=corner_box.offsetWidth,h=3} if(id=="l"){w=3,h=corner_box.offsetHeight} if(id=="r"){w=3,h=corner_box.offsetHeight} corner_="<td bgcolor=white></td>" corner_bo="<td bgcolor="+bo+"></td>" corner_bg="<td bgcolor="+bg+"></td>" corner_array=[corner_,corner_bo,corner_bg] if(id=="t"){col=3;row=1;html_array=[1,2,2]} //上边 if(id=="b"){col=3;row=1;html_array=[2,2,1]} //下边 if(id=="l"){col=1;row=3;html_array=[1,2,2]} //左边 if(id=="r"){col=1;row=3;html_array=[2,2,1]} //右边 if(id=="tl"){col=3;row=3;html_array=[0,0,1,0,1,2,1,2,2]} //左上角 if(id=="tr"){col=3;row=3;html_array=[1,0,0,2,1,0,2,2,1]} //右上角 if(id=="bl"){col=3;row=3;html_array=[1,2,2,0,1,2,0,0,1]} //左下角 if(id=="br"){col=3;row=3;html_array=[2,2,1,2,1,0,1,0,0]} //右下角 html="<table style=\"font-size:0\" cellpadding=0 cellspacing=0 width="+w+"px height="+h+"px><tr>" for(iii=0;iii<html_array.length;iii++) { html+=corner_array[html_array[iii]] if((iii+1)%row==0&&(iii+1)!=html_array.length){html+="</tr><tr>"} } html+="</tr></table>" postion.innerHTML=html } } } } } setcorner() </script>

   
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]