常德網站建設
常德網站設計制作建設,常德網頁設計制作建設,常德軟件開發虛擬主機域名注冊 常德網站制作 常德網站設計 常德虛擬主機  
 
常德域名注冊
   域名主機 DNS HOST
   關于賽特 ABOUT SITE
   服務項目 SERVICE PROJECT
   軟件開發 DEVELOPMENT
   解決方案 SOLUTION
   服務流程 CUSTOMER PROCESS
   成功案例 SUCCESS TORIES
   商務合作 COOPERATION
   服務報價 SERVICE PRICE
   聯系賽特 CONTACT SITE
   網站知識 WEBSITE KNOWLEDGE
 您的位置:首頁常德網站制作 - js css圓角邊框效果  
 



js css圓角邊框效果
 
常德網站制作  加入時間:2011/9/16 18:39:17     點擊:6528 常德網站建設  常德網站制作

<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.offsetWidth
corner_b.style.width=box.offsetWidth
corner_l.style.height=box.offsetHeight
corner_r.style.height=box.offsetHeight
box.style.background=bgcolor
}
corner("blue","#6699ff");
</script>

本代碼由<a href=http://www.111cn.net/js_a/js.html>網頁特效網</a>提供
更多詳細內容請查看:http://www.111cn.net/js_a/87/35376.htm


上一條:簡單實現用JS 音樂選播效果
下一條:CSS直接放大圖片

  常德虛擬主機   客戶列表 合作伙伴 | 工作機會 | 網站制作 | 友情鏈接
 本站關鍵詞:賽特科技 常德網站建設 常德網站開發 常德網站制作 常德網站設計 常德虛擬主機 常德空間域名
  Copyright(c)2008 http://www.vtfqvi.tw 地址:常德市洞庭大道西段170號湖南文理學院院內 賽特科技 湘ICP備08004647號
 
免费麻将苹果安卓版下载 台湾vr赛车 广西快3分析 玩极速赛车高手怎么赚钱的 视讯ag和og都指的什么 14场胜负彩选号投注合 重庆时时彩2.1版本安卓—点击进入 澳客足彩 内蒙古快三带线走势图 舟山飞鱼直播 六合图库东方心经 亿客隆彩票登录 海南环岛赛彩票控 dg梦幻厅娱乐官方网站 重庆幸运农场任选5计划 快乐12出号规律 上海天天彩选4玩法