<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:1pxsolidblue}
#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>
<scriptsrc=corner.js></script>
<tablecellpadding=0cellspacing=0width=400align=center>
<tr><tdid=tl></td><tdid=t></td><tdid=tr></td></tr>
<tr><tdid=l></td>
<tdid=box>
<tablecellpadding=3cellspacing=0width=100%>
<trid=tit><td>
<b>圆角效果</b>
</td></tr>
<tr><tdheight=200id=txt>
<Br>
</td></tr></table>
</td>
<tdid=r></td>
</tr>
<tr><tdid=bl></td><tdid=b></td><tdid=br></td></tr>
</table>
<script>
functionsetcorner(id)
{
varhtml;
if(id=="t")
{
html="<tableclass=cornerid=corner_tcellpadding=0cellspacing=0>"
html+="<tr><tdclass=corner_bo></td></tr><tr><tdclass=corner_bg></td></tr><tr><tdclass=corner_bg></td></tr>"
html+="</table>"
}
if(id=="b")
{
html="<tableclass=cornerid=corner_bcellpadding=0cellspacing=0>"
html+="<tr><tdclass=corner_bg></td></tr><tr><tdclass=corner_bg></td></tr><tr><tdclass=corner_bo></td></tr>"
html+="</table>"
}
if(id=="l")
{
html="<tableclass=cornerid=corner_lcellpadding=0cellspacing=0>"
html+="<tr><tdclass=corner_bo></td><tdclass=corner_bg></td><tdclass=corner_bg></td></tr>"
html+="</table>"
}
if(id=="r")
{
html="<tableclass=cornerid=corner_rcellpadding=0cellspacing=0>"
html+="<tr><tdclass=corner_bg></td><tdclass=corner_bg></td><tdclass=corner_bo></td></tr>"
html+="</table>"
}
if(id=="tl")
{
html="<tableclass=cornerid=corner_tlcellpadding=0cellspacing=0>"
html+="<tr><tdbgcolor=white></td><tdbgcolor=white></td><tdclass=corner_bo></td></tr>"
html+="<tr><tdbgcolor=white></td><tdclass=corner_bo></td><tdclass=corner_bg></td></tr>"
html+="<tr><tdclass=corner_bo></td><tdclass=corner_bg></td><tdclass=corner_bg></td></tr>"
html+="</table>"
}
if(id=="tr")
{
html="<tableclass=cornerid=corner_trcellpadding=0cellspacing=0>"
html+="<tr><tdclass=corner_bo></td><tdbgcolor=white></td><tdbgcolor=white></td></tr>"
html+="<tr><tdclass=corner_bg></td><tdclass=corner_bo></td><tdbgcolor=white></td></tr>"
html+="<tr><tdclass=corner_bg></td><tdclass=corner_bg></td><tdclass=corner_bo></td></tr>"
html+="</table>"
}
if(id=="bl")
{
html="<tableclass=cornerid=corner_blcellpadding=0cellspacing=0>"
html+="<tr><tdclass=corner_bo></td><tdclass=corner_bg></td><tdclass=corner_bg><tdclass=corner_bg></tr>"
html+="<tr><tdbgcolor=white></td><tdclass=corner_bo></td><tdclass=corner_bg></td></tr>"
html+="<tr><tdbgcolor=white></td><tdbgcolor=white></td><tdclass=corner_bo></td></tr>"
html+="</table>"
}
if(id=="br")
{
html="<tableclass=cornerid=corner_brcellpadding=0cellspacing=0>"
html+="<tr><tdclass=corner_bg></td><tdclass=corner_bg></td><tdclass=corner_bo></td></tr>"
html+="<tr><tdclass=corner_bg></td><tdclass=corner_bo></td><tdbgcolor=white></td></tr>"
html+="<tr><tdclass=corner_bo></td><tdbgcolor=white></td><tdbgcolor=white></td></tr>"
html+="</table>"
}
eval(id+".innerHTML=html")
}
functioncorner(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圆角效果.rar百度百科里的CSS圆角效果.rar百度百科里的CSS圆角效果.rar百度百科里的CSS圆角效果.rar
提取自百度有啊的css圆角效果
CSS圆角效果(无背景图片)。。。。。。
纯CSS圆角效果纯CSS圆角效果纯CSS圆角效果
一款经典的DIV+CSS实现的圆角效果
css圆角效果示范,非常简单的例子,教你如何实现圆角
css圆角效果</title> <meta http-equiv=”content-type” content=”text/html; charset=gb2312″> <style type=”text/css”> div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{...
css圆角效果大家注意下图片,其实就是利用图片+css实现
内容索引:脚本资源,CSS特效,CSS圆角特效 CSS圆角效果,看着很舒服,CSS+JS相结合打造出的效果,没有用到任何背景图片。只要引入一个JS文件,就可以无限制的使用这种效果了。
css圆角提示框是一款纯HTML CSS实现的圆角提示框效果,兼容所有浏览器。 css圆角提示框演示图:
用js实现css3效果的圆角方法,代码简洁方便,效果很不错,跟大家分享一下!!
css3圆角效果,能使网页做的更有个性。
简洁的css特效,无需添加任何图片,方便引用,完美的css圆角特效
css图片圆角处理代码JS脚本代码处理图片圆角效果
css实现圆角效果,写的很详细 很不错
-webkit-border-radius:苹果;...border-radius:用这个属性能实现圆角边框的效果。 现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码: 复制代码代码如下: <div style=”bac
div+css实现圆角导航菜单的效果。
用CSS实现无图片圆角效果!里面有好几种哦!
NULL 博文链接:https://leadtheway.iteye.com/blog/626344