css 圓角效果代碼

來源:互聯網
上載者:User
提示:您可以先修改部分代碼再運行

css 圓角效果代碼<style>td{font-size:9pt;word-break: break-all}.corner{font-size:0;}.corner_bo{background:blue}.corner_bg{background:#6699ff}#tit{height:22px;color:white;}#txt{line-height:150%;background:white;border:1px solid blue}#tl,#tr,#bl,#br,#corner_tl,#corner_tr,#corner_bl,#corner_br{width:3px;height:3px}#t,#b,#corner_t,#corner_b{height:3px}#l,#r,#corner_l,#corner_r{width:3px}</style><script src=corner.js></script><table cellpadding=0 cellspacing=0 width=400 align=center><tr><td id=tl></td><td id=t></td><td id=tr></td></tr><tr><td id=l></td><td id=box><table cellpadding=3 cellspacing=0 width=100%><tr id=tit><td><b>圓角效果</b></td></tr><tr><td height=200 id=txt><Br></td></tr></table></td><td id=r></td></tr><tr><td id=bl></td><td id=b></td><td id=br></td></tr></table><script>function setcorner(id){var html;if(id=="t"){html="<table class=corner id=corner_t cellpadding=0 cellspacing=0>"html+="<tr><td class=corner_bo></td></tr><tr><td class=corner_bg></td></tr><tr><td class=corner_bg></td></tr>"html+="</table>"}if(id=="b"){html="<table class=corner id=corner_b cellpadding=0 cellspacing=0>"html+="<tr><td class=corner_bg></td></tr><tr><td class=corner_bg></td></tr><tr><td class=corner_bo></td></tr>"html+="</table>"}if(id=="l"){html="<table class=corner id=corner_l cellpadding=0 cellspacing=0>"html+="<tr><td class=corner_bo></td><td class=corner_bg></td><td class=corner_bg></td></tr>"html+="</table>"}if(id=="r"){html="<table class=corner id=corner_r cellpadding=0 cellspacing=0>"html+="<tr><td class=corner_bg></td><td class=corner_bg></td><td class=corner_bo></td></tr>"html+="</table>"}if(id=="tl"){html="<table class=corner id=corner_tl cellpadding=0 cellspacing=0>"html+="<tr><td bgcolor=white></td><td bgcolor=white></td><td class=corner_bo></td></tr>"html+="<tr><td bgcolor=white></td><td class=corner_bo></td><td class=corner_bg></td></tr>"html+="<tr><td class=corner_bo></td><td class=corner_bg></td><td class=corner_bg></td></tr>"html+="</table>"}if(id=="tr"){html="<table class=corner id=corner_tr cellpadding=0 cellspacing=0>"html+="<tr><td class=corner_bo></td><td bgcolor=white></td><td bgcolor=white></td></tr>"html+="<tr><td class=corner_bg></td><td class=corner_bo></td><td bgcolor=white></td></tr>"html+="<tr><td class=corner_bg></td><td class=corner_bg></td><td class=corner_bo></td></tr>"html+="</table>"}if(id=="bl"){html="<table class=corner id=corner_bl cellpadding=0 cellspacing=0>"html+="<tr><td class=corner_bo></td><td class=corner_bg></td><td class=corner_bg><td class=corner_bg></tr>"html+="<tr><td bgcolor=white></td><td class=corner_bo></td><td class=corner_bg></td></tr>"html+="<tr><td bgcolor=white></td><td bgcolor=white></td><td class=corner_bo></td></tr>"html+="</table>"}if(id=="br"){html="<table class=corner id=corner_br cellpadding=0 cellspacing=0>"html+="<tr><td class=corner_bg></td><td class=corner_bg></td><td class=corner_bo></td></tr>"html+="<tr><td class=corner_bg></td><td class=corner_bo></td><td bgcolor=white></td></tr>"html+="<tr><td class=corner_bo></td><td bgcolor=white></td><td bgcolor=white></td></tr>"html+="</table>"}eval(id+".innerHTML=html")}function corner(border,bgcolor){setcorner("tl")setcorner("tr")setcorner("bl")setcorner("br")setcorner("t")setcorner("b")setcorner("l")setcorner("r")corner_t.style.width=box.offsetWidthcorner_b.style.width=box.offsetWidthcorner_l.style.height=box.offsetHeightcorner_r.style.height=box.offsetHeightbox.style.background=bgcolor}corner("blue","#6699ff");</script>本代碼由網頁特效網提供
提示:您可以先修改部分代碼再運行
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.