今天看到CSDN技术导航页中的圆角列表，发现他的实现手法很有趣，我还是第一次看到这种技术（落伍了
-_-||)。这种手法主要是利用左右浮动的白点把父DIV的背景颜色遮住以实现圆角。其实和利用线条实现圆角的思想一样。
效果如下图：
废话少说，我们直接看代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>浮动点实现圆角</title>
6 <style type="text/css">
7 * {
8 margin:0;
9 padding:0;
10 }
11 body {
12 font:12px/150% Georgia, "Times New Roman", Times, serif;
13 }
14 #box {
15 width:400px;
16 margin:10px auto;
17 background:#fbf;
18 overflow:hidden;
19 }
20 #box h3 {
21 color:#fff;
22 padding:5px 10px;
23 }
24 #box p {
25 background: #fff;
26 margin:0 1px;
27 padding:10px;
28 text-indent:2em;
29 line-height:160%;
30 }
31 #box .pl_1 {
32 float:left;
33 height:2px;
34 width:1px;
35 }
36 #box .pl_2 {
37 float:left;
38 height:1px;
39 width:2px;
40 }
41 #box .pl_3 {
42 float:left;
43 height:1px;
44 width:4px;
45 }
46 #box .pr_1 {
47 float:right;
48 height:2px;
49 width:1px;
50 }
51 #box .pr_2 {
52 float:right;
53 height:1px;
54 width:2px;
55 }
56 #box .pr_3 {
57 float:right;
58 height:1px;
59 width:4px;
60 }
61 #box .pc {
62 background:#fff;
63 +overflow:hidden;
64 }
65 .clear_float {
66 +zoom:1;
67 }
68 .clear_float:after {
69 content:"";
70 height:0;
71 clear:both;
72 visibility:hidden;
73 display:block;
74 }
75 </style>
76 </head>
77 <body>
78 <div id="box">
79 <div class="clear_float">
80 <div class="pr_3 pc"></div>
81 <div class="pl_3 pc"></div>
82 </div>
83 <div class="clear_float">
84 <div class="pr_2 pc"></div>
85 <div class="pl_2 pc"></div>
86 </div>
87 <div class="clear_float">
88 <div class="pr_1 pc"></div>
89 <div class="pl_1 pc"></div>
90 </div>
91 <h3>round corner</h3>
92 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
93 <div class="clear_float">
94 <div class="pr_1 pc"></div>
95 <div class="pl_1 pc"></div>
96 </div>
97 <div class="clear_float">
98 <div class="pr_2 pc"></div>
99 <div class="pl_2 pc"></div>
100 </div>
101 <div class="clear_float">
102 <div class="pr_3 pc"></div>
103 <div class="pl_3 pc"></div>
104 </div>
105 </div>
106 </body>
107 </html>
jimmy1985