|
蓝森林 http://www.lslnet.com 2006年8月25日 8:28
 [DIV+CSS大测验]实现在任何背景下可随意改变尺寸的圆角方框
用DIV+CSS，实现在任何背景下可随意改变尺寸的圆角方框，作为背景框，供填充内容使用。
[b]示意图[/b]
效果一：
[img]http://www.logor.net/images/angle_01.gif[/img]
效果二：
[img]http://www.logor.net/images/angle_02.gif[/img]
效果三：
[img]http://www.logor.net/images/angle_03.gif[/img]
[b]素材[/b]
为省去考生截图的麻烦，提供四个角的图如下：
[img]http://www.logor.net/images/angel_top_left.gif[/img]
[img]http://www.logor.net/images/angel_top_right.gif[/img]
[img]http://www.logor.net/images/angel_bottom_left.gif[/img]
[img]http://www.logor.net/images/angel_bottom_right.gif[/img]
[b]要求[/b]
不 能使用TABLE标签 |
| 不给用table？那不是叫人家砍柴拿把小刀吗? |
| [img]http://www.blueidea.com/articleimg/bbsimg/icon10.gif[/img] |
| :) |
| 看看http://www.zosou.net吧 |
| 我也想知道用div+css怎么实现圆角呢 |
zosou同学，
你的只能适用白色背景下，换背景色，就需要修改4个边角图片的颜色了。
如果边角图片设成透明，外围DIV的样式 ‘ background-image:url("../images/y_box_bot_bg.gif" ’ 就不能用了。
请再思考思考....
BTW:我不是来求方案的，希望引发大家的思考，确实是个难题。 |
我倒是想知道怎么实现背景透明色~可以显示出后面的背景图片
[img]http://i26.photobucket.com/albums/c144/samuer/55664A74-084E-48BE-8442-598428AE840.jpg[/img] |
| 楼上的发地址来分析。 |
| http://www.csszengarden.com/左上角大家分析看看 |
logor在上个帖子中说
vml解决,超级简单,连图片都不用,这种问题不需要思考也不是难题
[html]
<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>
[/html] |
| 嵌套DIV咋样 |
samuer在上个帖子中说
不是透明吧,是图片而已!
IE可以透明!
[html]
<style type="text/css">
div#nifty{margin: 0 10%;background: #9BD1FA;width: 200px;word-break:break-all;}/*这里设置圆角的宽,高只能自己识应*/
b.rtop, b.rbottom{display:block;background: #FFF}/*rtop和rbottom的*/
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}/*rtop和rbottom内的b的*//*height: 1px;overflow: hidden;可以成一真线*/
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
cao888这个不错呀cao888这个不错呀<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>[/html]
|
| vml去做圆角不合标准! |
cao888在上个帖子中说
VML做圆角不合标准,那么使用SVG呢? |
要标准就用边角透明的图片吧,就是说,把我用VML画出来的图片改成一个一样的gif好啦
用太多太复杂的代码会降低兼容性和代码重用性 |
[html]
<html><head><title>background</title>
<style type="text/css">
body { background:#036 url(http://www.blueidea.com/img/common/logo.gif) right repeat-y; margin:30px; color:#ccc; font-size:12px; }
.i { background:#369 url(http://www.logor.net/images/angel_top_right.gif) right top no-repeat; }
.j { background:transparent url(http://www.logor.net/images/angel_top_right.gif) right top no-repeat; }
</style>
</head><body>
<div class="i">由于圆角图片是透明的,所以此层的背景色在透明部分会显示出来</div>
<hr />
<div class="j">如果此层的背景也设为透明,那么父层的背景色(图)又会出现了</div>
<hr />
因此,我认为楼主提的问题目前来说还没解决方法.
</body></html>
[/html]
另:怎么我一上你的站我的Norton就提示找到病毒... |
| http://bbs.blueidea.com/viewthread.php?tid=1881447 |
| FireFOX等浏览器不支持VML |
| 呵呵，http://spaces.msn.com/kai521/blog/cns!B975A45786BE0D98!166.entry |
| 还可以啊 |
| 感觉还是都一般 |
cao888在上个帖子中说
不是透明吧,是图片而已!
IE可以透明![/quote]-->
cao888的方法真高明！我再花一个月时间思考，也想不出这样高明的办法！ 受用了。
[html]
<style type="text/css">
body { background:#0303cf; font:12px Verdana;}
.angle{margin: 10px 0; word-break:break-all;}
b.rtop, b.rbottom{display:block;}
b.rtop b, b.rbottom b {display:block;height: 1px;overflow: hidden; background: #ffffff}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
.anglein { background:#fff; padding:0 5px 0 5px; }
h3 { margin:0 0 10px 0; }
</style>
<div id="angle">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="anglein"><h3>cao888的方法真高明！</h3><p><style type="text/css"><br>
body { background:#0303cf; font:12px Verdana; }<br>
.angle{margin: 10px 0; word-break:break-all;}<br>
b.rtop, b.rbottom{display:block;}<br>
b.rtop b, b.rbottom b {display:block;height: 1px;overflow: hidden; background: #ffffff}<br>
b.r1{margin: 0 5px}<br>
b.r2{margin: 0 3px}<br>
b.r3{margin: 0 2px}<br>
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}<br>
.anglein { background:#fff; padding:0 5px 0 5px; clear:both; }<br>
</style></p>
<p><div id="angle"><br>
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><br>
<div class="anglein"> cao888的代码真高明！</div><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
[/html] |
同意hutia
vml解决,超级简单,连图片都不用,这种问题不需要思考也不是难题.
使用table也做不出圆角方框
若用div也是很复杂的事
[html]
<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<HEAD>
<META name="Gemeratpr" content="FlashVml(璀灿之星)4.0">
<META http-equiv="Content-Type" content="text/html;charset=gb2312">
<META name="KeyWords" content="我的作品flashvml-璀灿之星-璀灿之星-vml极道教程-vml-vmlflash-沐缘华-FYW-lshdic-风云舞">
<TITLE>我的作品</TITLE>
<STYLE>
v\:*{behavior:url(#default#VML);position:absolute;}
o\:*{behavior:url(#default#VML);}
</STYLE>
<script>
function window.onerror(){return true;} //防止您的程序出现错误时弹出提示
</script>
</HEAD>
<BODY bgcolor="#000000" style='scrollbar-base-color:#3434b3;scrollbar-shadow-color:white;scrollbar-highlight-color:white;scrollbar-arrow-color:white;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=#007700,endColorStr=white);'>
<bgsound loop=1 id=bgsound1>
<bgsound loop=-1 id=bgsound2>
<script>
//启动更新函数,更新所有使用隐藏功能的物件初期视图
var loadtime=null,loadtext='if(document.readyState!="complete"){window.status=window.status+"."}else{clearInterval(loadtime);window.status=""}';
window.status='相关数据资源正在加载，请等待'
loadtime=setInterval(loadtext,200)
function window.onload(){
}
</script>
<v:roundrect id=vml0 style="Z-INDEX:3004;LEFT:185;WIDTH:631;TOP:36;HEIGHT:50" arcsize="9830f" filled="t" fillcolor="#7cf36e" stroked="t" strokecolor="#f64e17" strokeweight="1px">
<v:fill type="gradientRadial" opacity=".5" color2="#d99732"/>
<v:stroke opacity="1" startarrow="none" endarrow="none" dashstyle="dashDot"/>
<br>
<style>
<!--a:hover { color: #000000; text-decoration: underline}-
->
<!--a:active { color: #000000; text-decoration: none}-->
<!--a:link { color: #2F2D37; ; text-decoration: none}-->
<!--a:visited { color: #2F2D37;; text-decoration: none}-->
.abc { line-height: 22px}
.t12 {
font-size: 15px;
font-family:华文行楷;
font-weight: lighter;
color: ##C3C1C1;
Filter: dropshadow(color=#ffffff,offx=1,offy=1);
TEXT-ALIGN: center;
TEXT-DECORATION: none
}
</style>
<TABLE WIDTH=660 BORDER=0 align="center" CELLPADDING=0
CELLSPACING=0>
<TR>
<TD COLSPAN=10 class="t12">
<div align="center">
<a href="FreeEmail.asp">微疯零零</a> |
<a href="CorEmail.asp">我佛山人</a> |
<a href="moneylist.asp">萧萧小雨</a> |
<a href="WebDesign.asp">孤零飘客</a> |
<a href="ad.asp">波希米亚</a> |
<a href="post.asp">心开风神</a>
</div></TD>
<TD> </TD>
</TR>
</table>
</v:roundrect>
<v:roundrect id=vml2 style="Z-INDEX:3012;LEFT:185;WIDTH:631;TOP:91;HEIGHT:400" arcsize="9830f" filled="t" fillcolor="#28b7eb" stroked="t" strokecolor="#3050fa" strokeweight="1px">
<v:fill type="gradientRadial" opacity=".5" color2="#00119d"/>
<v:stroke opacity="1" startarrow="none" endarrow="none" dashstyle="dot"/>
<br><br><br>
<p align="center" style="font-family:华文行楷;">
<script language="JavaScript">
<!-- Hide
function MakeArray(n){
this.length=n;
for(var i=1; i<=n; i++) this[i]=i-1;
return this
}
hex=new MakeArray(16);
hex[11]="A"; hex[12]="B"; hex[13]="C"; hex[14]="D"; hex[15]="E"; hex[16]="F";
function ToHex(x){
var high=x/16;
var s=high+"";
s=s.substring(0,2);
high=parseInt(s,10);
var left=hex[high+1];
var low=x-high*16;
s=low+"";
s=s.substring(0,2);
low=parseInt(s,10);
var right=hex[low+1];
var string=left+""+right;
return string;
}
function rainbow(text){
text=text.substring(3,text.length-4);
color_d1=100;
mul=color_d1/text.length;
for(i=0;i < text.length;i++){
color_d1=255*Math.sin(i/(text.length/3)); "255*Math.sin(i/(text.length/3))"
color_h1=ToHex(color_d1);
color_d2=mul*i;
color_h2=ToHex(color_d2);
document.write("<FONT COLOR='#FF"+color_h1+color_h2+"'>"+text.substring(i,i+1)+'</FONT>');
}
}
// -->
</script>
<script>{rainbow("-->文楼主的帖子实在写得太好了！文笔流畅，修辞得体，深得魏晋诸朝遗风，将唐风宋骨发扬得入木三分！<!--");}</script></p>
<style>
p {color: #669;background: url(http://asp.6to23.com/quminjie/hoho/pic/bg_line.gif);width: 620px;font-size: 12px;line-height: 22px;margin-left:5px;text-indent:2em;}
</style>
<p>各位好，小妹最近在学做网页，在网上看到这样一种效果很让我着迷，就是像平常写信时用的那种信纸一样每一行每一行都有一条虚线。请问这种效果是怎样做出来的。各位好，小妹最近在学做网页，在网上看到这样一种效果很让我着迷，就是像平常写信时用的那种信纸一样每一行每一行都有一条虚线。请问这种效果是怎样做出来的。各位好，小妹最近在学做网页，在网上看到这样一种效果很让我着迷，就是像平常写信时用的那种信纸一样每一行每一行都有一条虚线。请问这种效果是怎样做出来的。各位好，小妹最近在学做网页，在网上看到这样一种效果很让我着迷，就是像平常写信时用的那种信纸一样每一行每一行都有一条虚线。请问这种效果是怎样做出来的。各位好，小妹最近在学做网页，在网上看到这样一种效果很让我着迷，就是像平常写信时用的那种信纸一样每一行每一行都有一条虚线。请问这种效果是怎样做出来的。各位好，小妹最近在学做网页，在网上看到这样一种效果很让我着迷，就是像平常写信时用的那种信纸一样每一行每一行都有一条虚线。请问这种效果是怎样做出来的。各位好，小妹最近在学做网页，在网上看到这样一种效果很让我着迷，就是像平常写信时用的那种信纸一样每一行每一行都有一条虚线。请问这种效果是怎样做出来的。各位好，小妹最近在学做网页，在网上看到这样一种效果很让我着迷，就是像平常写信时用的那种信纸一样每一行每一行都有一条虚线。请问这种效果是怎样做出来的。</p>
</v:roundrect>
<SCRIPT> //以下程序快速执行使预隐藏图形及时隐藏
try{var bodyobjs=document.body.children;for(i=0;i<bodyobjs.length;i++){
if(bodyobjs[i].ych!=null)bodyobjs[i].style.display='none';
if(bodyobjs[i].tagName=="group"){
bodyobjs[i].contentEditable=false;
for(r=0;r<bodyobjs[i].children.length;r++){if(bodyobjs[i].children[r].ych!=null)bodyobjs[i].children[r].style.display='none';}
}
}}catch(e){}
</SCRIPT>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<center>
<table width="200" border="1" cellpadding="1" cellspacing="3" bordercolor="#ffffff" bgcolor="#FF9966" borderColordark=#000000>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br><br>
<DIV id=Rounded_Corners2_by_Gene align=center>
<DIV id=t1 style="OVERFLOW: hidden; WIDTH: 238px;(t1); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"></DIV>
<DIV id=t2 style="OVERFLOW: hidden; WIDTH: 244px;(t2=t1+6); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c2 style="OVERFLOW: hidden; WIDTH: 238px;(c2=t1); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t3 style="OVERFLOW: hidden; WIDTH: 248px;(t3=t2+4); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c3 style="OVERFLOW: hidden; WIDTH: 244px;(c3=t2); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t4 style="OVERFLOW: hidden; WIDTH: 250px;(t4=t3+2); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c4 style="OVERFLOW: hidden; WIDTH: 248px;(c4=t3); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t5 style="OVERFLOW: hidden; WIDTH: 252px;(t5=t4+2); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c5 style="OVERFLOW: hidden; WIDTH: 250px;(c5=t4); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t6 style="OVERFLOW: hidden; WIDTH: 254px;(t6=t5+2); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c6 style="OVERFLOW: hidden; WIDTH: 252px;(c6=t5); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t7 style="OVERFLOW: hidden; WIDTH: 256px;(t7=t6+2); HEIGHT: 2px; BACKGROUND-COLOR: #3366cc"><DIV id=c7 style="OVERFLOW: hidden; WIDTH: 254px;(c7=t6); HEIGHT: 2px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t8 style="OVERFLOW: hidden; WIDTH: 258px;(t8=t7+2); HEIGHT: 2px; BACKGROUND-COLOR: #3366cc"><DIV id=c8 style="OVERFLOW: hidden; WIDTH: 256px;(c8=t7); HEIGHT: 2px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=main style="OVERFLOW: hidden; WIDTH: 260px; HEIGHT: 100px; BACKGROUND-COLOR: #3366cc">
<DIV id=main style="OVERFLOW: hidden; WIDTH: 258px; HEIGHT: 100px; BACKGROUND-COLOR: #ffffff"><BR><FONT face=Verdana color=#333330>Testing Rounded Corners <BR>without images
& javascript<BR><BR>by Gene</FONT></DIV></DIV>
<DIV id=t8 style="OVERFLOW: hidden; WIDTH: 258px; HEIGHT: 2px; BACKGROUND-COLOR: #3366cc"><DIV id=c8 style="OVERFLOW: hidden; WIDTH: 256px; HEIGHT: 2px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t7 style="OVERFLOW: hidden; WIDTH: 256px; HEIGHT: 2px; BACKGROUND-COLOR: #3366cc"><DIV id=c7 style="OVERFLOW: hidden; WIDTH: 254px; HEIGHT: 2px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t6 style="OVERFLOW: hidden; WIDTH: 254px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c6 style="OVERFLOW: hidden; WIDTH: 252px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t5 style="OVERFLOW: hidden; WIDTH: 252px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c5 style="OVERFLOW: hidden; WIDTH: 250px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t4 style="OVERFLOW: hidden; WIDTH: 250px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c4 style="OVERFLOW: hidden; WIDTH: 248px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t3 style="OVERFLOW: hidden; WIDTH: 248px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c3 style="OVERFLOW: hidden; WIDTH: 244px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t2 style="OVERFLOW: hidden; WIDTH: 244px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c2 style="OVERFLOW: hidden; WIDTH: 238px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t1 style="OVERFLOW: hidden; WIDTH: 238px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"></DIV>
</DIV>
<br><br><br><br><br><br><br>
</BODY>
</HTML>
[/html] |
| 楼上的代码有点混乱，能来个简单的么？ |
|
