CSS实例(八)：不用图片实现宽度、高度自定的圆角矩形
根据google的analytics界面分析整理，个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观，但是可以随意设置圆角矩形的宽度及高度，很灵活。
不知为什么google用了b元素，有点奇怪。
页面源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/> <title></title><style type="text/css">html,body{font-size:12px;}.round_border,.round_border b{display:block;text-align:center;}.round_border_layer3,.round_border_layer2,.round_border_layer1,.round_border_content{border:1px solid #c4c4c4;border-width:0 1px 0 1px;height:1px;overflow:hidden;}.round_border_layer3{margin:0 3px;background:#c4c4c4;}.round_border_layer2{margin:0 2px;}.round_border_layer1{margin:0 1px;}.round_border_content{height:300px;padding:3px 6px;}/*only for better appearance, not necessary, http://wallimn.iteye.com*/.round_border_layer2,.round_border_layer1{border-color:#d3d4d5;}/*******************control bar**********************/.controlbar_border_layer3,.controlbar_border_layer2,.controlbar_border_layer1,.controlbar_border_content{background:#e9e9e9;height:1px;overflow:hidden;}.controlbar_border_layer3{margin:0 3px;}.controlbar_border_layer2{margin:0 2px;}.controlbar_border_layer1{margin:0 1px;}.controlbar_border_content{height:20px;padding:0 1em;line-height:20px;vertical-align:middle;}/*only for better appearance, not necessary, http://wallimn.iteye.com*/.controlbar_border_layer1,..controlbar_border_layer2{border-color:#f2f2f2;}</style></head><body><div style="width:260px;"><b />
新手入门，请多指教。
.round1 {border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;}.round2 {border-left:2px solid #FFFFFF;border-right:2px solid #FFFFFF;}.round4 {border-left:4px solid #FFFFFF;border-right:4px solid #FFFFFF;}.round1, .round2, .round4 {font-size:0;height:1px;margin:0;padding:0;}<div 是为了少用字符, 减少网络流量吧, 哈哈 13 楼 wallimn 2010-10-16 楼上说的似乎有那么点道理。 14 楼 binlaniua 2010-10-27 创建1000个B和1000个DIV就了解了 15 楼 pbny001 2010-11-28 虽然可以实现圆角矩形，但为了一个圆角加了那么多无意义的标识符不是xhtml标准所提倡的，并且html代码也会变得冗长。感觉还是用图片来实现较划算，并且用图片还可以实现阴影之类的特效等。 16 楼 william_zhg 2010-12-03 是啊。只要能兼容当前最常用的浏览器，应该是不错的。
17 楼 nqykl 2010-12-20 感觉用CSS实现圆角还是切图的好。。
18 楼 上善如水 2010-12-21 可以，我试了试。 19 楼 xutao5641745 2011-04-26 测试完毕。。。IE6、火狐都能通过。 20 楼 yatou_0209 2011-05-20 有必要这么麻烦吗？是不是就是想实现圆角啊？ 21 楼 kkvsyy 2011-06-02 CSS3 已经支持圆角了 期待各大浏览器的支持吧 不用整这么多的CSS代码了 目前火狐已经很好的支持了． 22 楼 wallimn 2011-06-02 FF对样式的支持确实不错。能人所不能。 23 楼 vimest 2011-06-30 记得a list apart上面介绍过一个五图片的滑动门，好强大。 24 楼 叶凡520 2011-06-30 我复制代码 IE8测试成功 效果图很不错