精华帖 (0) :: 良好帖 (3) :: 新手帖 (8) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-10-11
最后修改:2010-10-12
不知为什么google用了b元素,有点奇怪。 页面源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/> <title></title> <style type="text/css"> html,body{ font-size:12px; } .round_border,.round_border b{ display:block; text-align:center; } .round_border_layer3,.round_border_layer2,.round_border_layer1, .round_border_content{ border:1px solid #c4c4c4; border-width:0 1px 0 1px; height:1px; overflow:hidden; } .round_border_layer3{ margin:0 3px; background:#c4c4c4; } .round_border_layer2{ margin:0 2px; } .round_border_layer1{ margin:0 1px; } .round_border_content{ height:300px; padding:3px 6px; } /*only for better appearance, not necessary, http://wallimn.iteye.com*/ .round_border_layer2,.round_border_layer1{ border-color:#d3d4d5; } /*******************control bar**********************/ .controlbar_border_layer3,.controlbar_border_layer2,.controlbar_border_layer1, .controlbar_border_content{ background:#e9e9e9; height:1px; overflow:hidden; } .controlbar_border_layer3{ margin:0 3px; } .controlbar_border_layer2{ margin:0 2px; } .controlbar_border_layer1{ margin:0 1px; } .controlbar_border_content{ height:20px; padding:0 1em; line-height:20px; vertical-align:middle; } /*only for better appearance, not necessary, http://wallimn.iteye.com*/ .controlbar_border_layer1,..controlbar_border_layer2{ border-color:#f2f2f2; } </style> </head> <body> <div style="width:260px;"> <b class="round_border"> <b class="round_border_layer3"></b> <b class="round_border_layer2"></b> <b class="round_border_layer1"></b> </b> <div class="round_border_content"> <b class="round_border"> <b class="controlbar_border_layer3"></b> <b class="controlbar_border_layer2"></b> <b class="controlbar_border_layer1"></b> </b> <div class="controlbar_border_content"> 隔壁老王 </div> <b class="round_border"> <b class="controlbar_border_layer1"></b> <b class="controlbar_border_layer2"></b> <b class="controlbar_border_layer3"></b> </b> </div> <b class="round_border"> <b class="round_border_layer1"></b> <b class="round_border_layer2"></b> <b class="round_border_layer3"></b> </b> </div> </body> </html> 效果(编辑调试浏览器IE7): 新手入门,请多指教。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-10-12
看不太懂!
|
|
返回顶楼 | |
发表时间:2010-10-12
其实就是高度1px的border拼出来的
但是不够圆滑 |
|
返回顶楼 | |
发表时间:2010-10-12
最后修改:2010-10-13
zhouqq 写道 看不太懂!
那个margin就是来做圆角的, 把b放在盒子里面,然后用margin:0 xpx, b的内容旧放一个空格,背景色就和内容颜色一样旧可以了 |
|
返回顶楼 | |
发表时间:2010-10-12
把页面(或者把图抓下来)放大一些就看明白了。
|
|
返回顶楼 | |
发表时间:2010-10-13
楼主,我copy你的代码在浏览器里看不到效果
|
|
返回顶楼 | |
发表时间:2010-10-13
什么浏览器呀?我试试。
|
|
返回顶楼 | |
发表时间:2010-10-13
我用IE7、FF、Chrome都试了一下,可以呀。
|
|
返回顶楼 | |
发表时间:2010-10-13
Google浏览器也可以看出效果...不错
|
|
返回顶楼 | |
发表时间:2010-10-14
浏览器兼容吗?
|
|
返回顶楼 | |