css 圆角效果代码

时间：2022-07-02 15:39:03 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

圆角效果代码
<style>
td{font-size:9pt;word-break: break-all}
.corner{font-size:0;}
.corner_bo{background:blue}
.corner_bg{background:#6699ff}
#tit{color:white;}
#txt{line-height:150%;background:white;border:1px solid blue}
#tl,#tr,#bl,#br,#corner_tl,#corner_tr,#corner_bl,#corner_br{}
#t,#b,#corner_t,#corner_b{}
#l,#r,#corner_l,#corner_r{}
</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><tr><td class=corner_bg><tr><td class=corner_bg>"
html+=""
}
if(id=="b")
{
html="<table class=corner id=corner_b cellpadding=0 cellspacing=0>"
html+="<tr><td class=corner_bg><tr><td class=corner_bg><tr><td class=corner_bo>"
html+=""
}
if(id=="l")
{
html="<table class=corner id=corner_l cellpadding=0 cellspacing=0>"
html+="<tr><td class=corner_bo><td class=corner_bg><td class=corner_bg>"
html+=""
}
if(id=="r")
{
html="<table class=corner id=corner_r cellpadding=0 cellspacing=0>"
html+="<tr><td class=corner_bg><td class=corner_bg><td class=corner_bo>"
html+=""
}
if(id=="tl")
{
html="<table class=corner id=corner_tl cellpadding=0 cellspacing=0>"
html+="<tr><td bgcolor=white><td bgcolor=white><td class=corner_bo>"
html+="<tr><td bgcolor=white><td class=corner_bo><td class=corner_bg>"
html+="<tr><td class=corner_bo><td class=corner_bg><td class=corner_bg>"
html+=""
}
if(id=="tr")
{
html="<table class=corner id=corner_tr cellpadding=0 cellspacing=0>"
html+="<tr><td class=corner_bo><td bgcolor=white><td bgcolor=white>"
html+="<tr><td class=corner_bg><td class=corner_bo><td bgcolor=white>"
html+="<tr><td class=corner_bg><td class=corner_bg><td class=corner_bo>"
html+=""
}
if(id=="bl")
{
html="<table class=corner id=corner_bl cellpadding=0 cellspacing=0>"
html+="<tr><td class=corner_bo><td class=corner_bg><td class=corner_bg><td class=corner_bg>"
html+="<tr><td bgcolor=white><td class=corner_bo><td class=corner_bg>"
html+="<tr><td bgcolor=white><td bgcolor=white><td class=corner_bo>"
html+=""
}
if(id=="br")
{
html="<table class=corner id=corner_br cellpadding=0 cellspacing=0>"
html+="<tr><td class=corner_bg><td class=corner_bg><td class=corner_bo>"
html+="<tr><td class=corner_bg><td class=corner_bo><td bgcolor=white>"
html+="<tr><td class=corner_bo><td bgcolor=white><td bgcolor=white>"
html+=""
}
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>

本代码由提供

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

css 圆角效果代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程