用css生成的无锯齿完美圆角
现在web2.0时代圆角风行，对于圆角效果有多种实现方案，比如圆角透明的png图片、透明gif、纯css控制等等
今天在网上看到一种用css实现无锯齿完美圆角的方法，值得收藏。
HTML代码：
1: <html>
2: <head>
3: <style type="text/css">
4: .spiffy{display:block} 5: .spiffy *{ 6: display:block; 7: height:1px; 8: overflow:hidden; 9: font-size:.01em; 10: background:#CC0000} 11: .spiffy1{ 12: margin-left:3px; 13: margin-right:3px; 14: padding-left:1px; 15: padding-right:1px; 16: border-left:1px solid #e99191; 17: border-right:1px solid #e99191; 18: background:#d83f3f} 19: .spiffy2{ 20: margin-left:1px; 21: margin-right:1px; 22: padding-right:1px; 23: padding-left:1px; 24: border-left:1px solid #f9e5e5; 25: border-right:1px solid #f9e5e5; 26: background:#d53030} 27: .spiffy3{ 28: margin-left:1px; 29: margin-right:1px; 30: border-left:1px solid #d53030; 31: border-right:1px solid #d53030;} 32: .spiffy4{ 33: border-left:1px solid #e99191; 34: border-right:1px solid #e99191} 35: .spiffy5{ 36: border-left:1px solid #d83f3f; 37: border-right:1px solid #d83f3f} 38: .spiffyfg{ 39: background:#CC0000}40: </style>
41: 42: </head>
43: <body>
44: 45: <div>
46: <b class="spiffy">
47: <b class="spiffy1"><b></b></b>
48: <b class="spiffy2"><b></b></b>
49: <b class="spiffy3"></b>
50: <b class="spiffy4"></b>
51: <b class="spiffy5"></b></b>
52: 53: <div class="spiffyfg">
54: <!– content goes here –>
55: 56: this is the content!<br/>
57: this is the content!<br/>
58: this is the content!<br/>
59: this is the content!<br/>
60: this is the content!<br/>
61: this is the content!<br/>
62: this is the content!<br/>
63: </div>
64: 65: <b class="spiffy">
66: <b class="spiffy5"></b>
67: <b class="spiffy4"></b>
68: <b class="spiffy3"></b>
69: <b class="spiffy2"><b></b></b>
70: <b class="spiffy1"><b></b></b></b>
71: </div>
72: </body>
73: </html>
效果非常好，没有锯齿状
这里有个工具链接，可以在线生成以上代码，非常方便
http://www.spiffycorners.com/index.php
