css无图片圆角效果

不知为何，现在的美工都喜欢弄圆角。之前的网站也弄过圆角，当时做法现在感觉确实太笨了：1用图片；2用Table 背景色嵌套出来
这两个做法不仅增加客户端下载数据量，而且改起来也很麻烦。所以综合网上的资料整了个不用图片的单纯css的圆角效果，个人感觉还不错：

看下代码吧：

<html>
2

<head>
3

<title>css圆角效果</title>
4

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>

posted on 2007-07-23 17:32 xpengfee 阅读(854) 评论(3) 收藏举报