注册 | 登陆

您的位置：阿里西西 > 网页特效 > 页面特效 > 详细内容

0顶

css制作圆角窗口

稿源：互联网 2022-08-19 15:16:37 点击： 937 撤稿纠错

圆角窗口css代码，自定义窗口颜色。

以下讨论的是和圆角相关的css制作圆角窗口教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<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>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<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><a href="http://www.zzjs.net" target="_blank">站长特效网</a>，打造国内最帅的网页特效站！
</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)
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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")
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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")
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
corner("blue","#6699ff");
</script>

关于css制作圆角窗口的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010090896564.shtml方便下次再访问哦。

·上一篇： 点击链接弹出漂亮小窗口
·下一篇： 窗口自由拖动放大效果

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

更多 »

最新新闻

更多 »