Home > Technology > 纯CSS圆角矩形布局代码

纯CSS圆角矩形布局代码

July 28th, 2009 Leave a comment Go to comments

验证可用！这套代码用起来非常舒服，我们可以任意改变边框和背景的颜色；任意调整矩形的宽度！只是没办法调整高度，因为这套CSS代码本身是不限制圆角矩形宽度的，我们是在其外加一个DIV来限制其宽度，所以只能横向整！纵向整不了！

调整方法：通过调整CSS文件中的#Bruce内的width来调整矩形的宽度；将CSS文件中所有的#999统一换成你需要的边框颜色；在CSS文件.d1中调整背景颜色和内容填充距离、间距。
HTML代码：

<div id="Bruce">
<strong class="b1"></strong><strong class="b2 d1"></strong><strong class="b3 d1"></strong><strong class="b4 d1"></strong>
<div class="b d1">
矩形内容</div>
<strong class="b4b d1"></strong><strong class="b3b d1"></strong><strong class="b2b d1"></strong><strong class="b1b"></strong></div>

CSS代码：

#Bruce{width:300px}
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:red;padding-left:5px;font-size:12px;color:white}

——————————————————————————————————————
有标题版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<style type="text/css">
.hz{width:200px}
.a{margin:0 4px;background:#B0BEC7;height:1px;overflow:hidden;}
.b{margin:0 2px;border:1px solid #B0BEC7;border-width:0 2px;background:#E1E7E9;height:1px;overflow:hidden;}
.c{margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;}
.d{margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;}
.e{background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px}
.f{font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;}
.g{background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;}
.h{margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;}
.i{margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;}
.j{margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;}
.k{margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;}
</style>
 
<div class="hz">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e">
<div class="f">Cascading Style Sheets</div>
<div class="g">Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc.</div>
</div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
</div>

声明：原创文章-转载请注明Bruce|http://brucehan.com/本文链接地址： 纯CSS圆角矩形布局代码

Categories: Technology Tags: , ,
Bruce |
  1. 华晨
    July 29th, 2009 at 09:02 | #1
    Reply | Quote

    太古老的方法了，现在可以直接用css3的方法，直接把ie忽略掉。

  2. Bruce
    July 29th, 2009 at 18:51 | #2
    Reply | Quote

    @华晨 好么，那你能否给我大致介绍介绍呢！ :smile:

  3. 华晨
    July 29th, 2009 at 18:55 | #3
    Reply | Quote

    在需要加圆角的标签中加如下属性：
    -moz-border-radius: 5px; // Firefox
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px; // Chrome、Safari
    border-radius: 5px;

  4. Bruce
    July 29th, 2009 at 19:18 | #4
    Reply | Quote

    @华晨 这样吧，能不能麻烦你写个FF里的圆角文件发到我邮箱?s.ori@qq.com 我有几个疑问想与你探讨一下！IE6支持Css3么?

  5. 华晨
    July 29th, 2009 at 19:27 | #5
    Reply | Quote

    @Bruce
    已经发了，请查收，不明白的可以再问我 ^_^

  6. 华晨
    July 29th, 2009 at 19:28 | #6
    Reply | Quote

    是 s.ori@qq.com 这个邮箱吧？

  7. Bruce
    July 29th, 2009 at 19:35 | #7
    Reply | Quote

    @华晨 好的非常感谢！

  8. 华晨
    July 29th, 2009 at 19:37 | #8
    Reply | Quote

    @Bruce
    怎么感谢我呢？什么具体行动呀？ :grin: 呵呵，说笑的，不用谢，应该的。 :razz:

  9. Bruce
    July 29th, 2009 at 19:46 | #9
    Reply | Quote

    @华晨 给你一个长吻 :oops:

  10. 华晨
    July 29th, 2009 at 19:52 | #10
    Reply | Quote

    @Bruce
    汗！有空过几天看看我新完成的我的博客哦。

  11. Bruce
    August 6th, 2009 at 00:30 | #11
    Reply | Quote

    @华晨 你那个博客跟千鸟志的哪里是像简直一个样子！ :?:
    我想了几天看了看，感觉现阶段抛弃IE6是不行的！我一般做的是企业站，一般老板都是比较大大咧咧的，打开电脑就开搞的毕竟在多数……所以目前看来，还是用这种比较老的方法兼容所有浏览器来的安全！缺点就是框稍微大一点之后容易有锯齿，不过大矩形我们可以选择用图片做圆角啊！
    期待将来的：.roundbox { round:3px; } /* 圆角大小为三像素 */ 能够成真！ :razz:

  1. No trackbacks yet.