纯CSS实现的方框圆角

纯CSS实现的方框圆角,无图片实现圆角

CSS Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
div.RoundedCorner{background: #9BD1FA}
 
b.rtop, b.rbottom{display:block;background: #FFFFFF}
 
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
 
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}

HTML Code :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<div class="RoundedCorner">
 
<b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
</b>
 
无图片实现圆角
 
<b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b>
</b>
 
</div>
 
<br/>
 
<div class="RoundedCorner">
 
<b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
</b>
 
<p>无图片实现圆角</p>
 
<p>
<b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
</b>
</p>
 
</div>

演示:

http://blog.moocss.com/Project/CSS-HTML/demo4/CSS-Rounded Corner.html

站点统计