今天看到CSDN技術(shù)導(dǎo)航頁中的圓角列表，發(fā)現(xiàn)他的實(shí)現(xiàn)手法很有趣，我還是第一次看到這種技術(shù)（落伍了
-_-||)。這種手法主要是利用左右浮動的白點(diǎn)把父DIV的背景顏色遮住以實(shí)現(xiàn)圓角。其實(shí)和利用線條實(shí)現(xiàn)圓角的思想一樣。
效果如下圖：
廢話少說，我們直接看代碼：
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>浮動點(diǎn)實(shí)現(xiàn)圓角</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