概要:
看到许多网站的边框许可能是圆角的,很漂亮,但是我做图本领不行,因此想一想能不能用css实现呢?通过一番搜索,有了发现.主要原理大概是线条的重叠.下面作一番分析,若是有不妥,但愿各位能纠正,在此先谢过了.
- CSS代码:
1
<HTML>
2 <HEAD>
3 <style>
4 .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b { display : block ; overflow : hidden ; }
5 .b1,.b2,.b3,.b1b,.b2b,.b3b { height : 1px ; }
6 .b2,.b3,.b4,.b2b,.b3b,.b4b,.b { border-left : 1px solid #999 ; border-right : 1px solid #999 ; }
7 .b1,.b1b { margin : 0 5px ; background : #999 ; }
8 .b2,.b2b { margin : 0 3px ; border-width : 2px ; }
9 .b3,.b3b { margin : 0 2px ; }
10 .b4,.b4b { height : 2px ; margin : 0 1px ; }
11 .d1 { background : #F7F8F9 ; }
12 </style>
13 </head>
14 <body>
15 <div style="width:771px">
16 <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
17 <div class="b d1">
18 <font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
19 </div>
20 <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
21 </div>
22 </body>
23 </html>
2 <HEAD>
3 <style>
4 .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b { display : block ; overflow : hidden ; }
5 .b1,.b2,.b3,.b1b,.b2b,.b3b { height : 1px ; }
6 .b2,.b3,.b4,.b2b,.b3b,.b4b,.b { border-left : 1px solid #999 ; border-right : 1px solid #999 ; }
7 .b1,.b1b { margin : 0 5px ; background : #999 ; }
8 .b2,.b2b { margin : 0 3px ; border-width : 2px ; }
9 .b3,.b3b { margin : 0 2px ; }
10 .b4,.b4b { height : 2px ; margin : 0 1px ; }
11 .d1 { background : #F7F8F9 ; }
12 </style>
13 </head>
14 <body>
15 <div style="width:771px">
16 <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
17 <div class="b d1">
18 <font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
19 </div>
20 <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
21 </div>
22 </body>
23 </html>
2. CSS样式分析
从4-11行是定义的CSS样式.能够看出有b1-b4表示边框上边框, b1b-b4b表示边框下边框,b表示中间部分,如图所示
1):线条顺序:
若是要实现如上所示的圆角.上面须要四跟线条b1,b2,b3,b4,下面须要四根线条,b1b,b2b,b3b,b4b
由于互相的衔接,所以采用block现实方式,由于block的方式会为对象添加新行,保持他们的层次.
因此上边框的顺序是b1,b2,b3,b4,下边框的顺序b4b,b3b,b2b,b1b
2):各个线条宽度,高度
若是设整个边框宽度为1,圆角宽度为5
b1则左右边距为5
b2左右边距3,则宽度为2
b3左右边距2,宽度为1
b4左右边距1,宽度5-2-1-1=1,高度5-1-1-1=2
3):代码详解
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
全部线条现实都是以block方式现实,即:块对象的默认值。将对象强制做为块对象呈递，为对象以后添 加新行
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
高度都是1像素,其中b4,b4b是2px;
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
除了b1,b1b左右边都是1px;
.b1,.b1b{margin:0 5px;background:#999;}
b1,b1b上下边距0 ,左右边距5
.b2,.b2b{margin:0 3px;border-width:2px;}
b2,b2b 上下边距0,左右边距3,边的宽度为2,所以恰好接上b1
.b3,.b3b{margin:0 2px;}
b3,b3b 上下边距0,左右边距2 边的宽度为1
.b4,.b4b{height:2px;margin:0 1px;}
b4,b4b 高度为2,上下边距0 左右边距1
.d1{background:#F7F8F9;}
4):数据结构
<div style="width:771px">
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1">
<font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>