不知为何，现在的美工都喜欢弄圆角。之前的网站也弄过圆角，当时做法现在感觉确实太笨了：1用图片；2用Table 背景色嵌套出来
这两个做法不仅增加客户端下载数据量，而且改起来也很麻烦。所以综合网上的资料整了个不用图片的单纯css的圆角效果，个人感觉还不错：
看下代码吧：
这两个做法不仅增加客户端下载数据量，而且改起来也很麻烦。所以综合网上的资料整了个不用图片的单纯css的圆角效果，个人感觉还不错：
看下代码吧：
1
<html>
2<head>
3<title>css圆角效果</title>
4
<style type="text/css">
5
div.RoundedCorner{}{background: #FFCB2D; width:150px;}
6b.rtop, b.rbottom{}{display:block;background: #FFF}
7b.rtop b, b.rbottom b{}{display:block;height: 1px;overflow: hidden; background: #FFCB2D}
8b.r1{}{margin: 0 5px}
9b.r2{}{margin: 0 3px}
10b.r3{}{margin: 0 2px}
11b.rtop b.r4, b.rbottom b.r4{}{margin: 0 1px;height: 2px}
12table.content{}{border:0px;height:100px; font-family:Tahoma; font-size:9.5pt;color:#363A36;}
13</style>
14</head>
15<body>
16<div class="RoundedCorner">
17<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
18<table class="content">
19 <tr>
20 <td>圆角效果</td>
21 </tr>
22 <tr>
23 <td>bbbbbbbbbbbb</td>
24 </tr>
25 <tr>
26 <td>cccccccc</td>
27 </tr>
28 <tr>
29 <td>dddddddddd</td>
30 </tr>
31 <tr>
32 <td>eeeeeeeeeee</td>
33 </tr>
34</table>
35<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
36</div>
37</body>
38</html>
<html>2
<head>3
<title>css圆角效果</title>4
<style type="text/css">5
div.RoundedCorner{}{background: #FFCB2D; width:150px;}6
b.rtop, b.rbottom{}{display:block;background: #FFF}7
b.rtop b, b.rbottom b{}{display:block;height: 1px;overflow: hidden; background: #FFCB2D}8
b.r1{}{margin: 0 5px}9
b.r2{}{margin: 0 3px}10
b.r3{}{margin: 0 2px}11
b.rtop b.r4, b.rbottom b.r4{}{margin: 0 1px;height: 2px}12
table.content{}{border:0px;height:100px; font-family:Tahoma; font-size:9.5pt;color:#363A36;}13
</style>14
</head>15
<body>16
<div class="RoundedCorner">17
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>18
<table class="content">19
<tr>20
<td>圆角效果</td>21
</tr>22
<tr>23
<td>bbbbbbbbbbbb</td>24
</tr>25
<tr>26
<td>cccccccc</td>27
</tr>28
<tr>29
<td>dddddddddd</td>30
</tr>31
<tr>32
<td>eeeeeeeeeee</td>33
</tr>34
</table>35
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>36
</div>37
</body>38
</html>