css实现兼容IE和Firefox主流浏览器的圆角样式

看见zhiqiang兄的站点改版了，改得比较漂亮，有点2.0的感觉，布局采用了圆角的div，我个人非常喜欢，只可惜的是这个圆角的div不支持IE，要怪只能怪IE当初我行我素，所以这点比较遗憾。当然目前实现圆角大都采用图片做背景，而zhiqiang兄对速度的有着几乎BT的追求，在他的blog上，很少有多余的js和image，这点我很是赞同，所以我也一直在打算将本站的google js去掉，用自己改写google的live search来替换掉。不管怎样，他的改版也唤醒了我对本站改版的欲望，关于圆角的DIV实现方法，我花了点时间已经解决，现在我这里把我的方法介绍一下，主要是用多个标签来完成的，因为我也不想用图片做背景，而且即使用图片做背景，css样式表中也不见得节约了多少字节。下面是我实现的代码，有阴影效果，支持主流的浏览器如IE和Firefox。

i.corner {display: block;}
i.corner i{height:1px; display:block; font-size:1px; overflow:hidden; background-color:#FFFFFF;}
i.corner i.l1{
margin: 0 5px;
border-bottom:1px solid #ced4ca;
}
i.corner i.l2,i.corner i.l3,i.corner i.l4,div.cbody{
margin: 0 3px;
border-left:1px solid #ced4ca;
border-right:2px solid #ced4ca;
}
i.corner i.l3{margin: 0 2px;}
i.corner i.l4{margin: 0 1px;height: 2px;}
i.corner i.l5{margin: 0 5px;border-top:2px solid #ced4ca;height:2px;}
div.cbody{
padding: 0 8px;
margin:0;
}
.panel{width: 400px;font-size:12px;}

storyday is a good site.You can find many useful tips about php html css and wordpress here.If you like it, you can add the rss feed to your reader,thank you.

呵呵，这样做圆角样式很cool吧？少用了图片，而且可以很方便的缩放，更加令人激动的是兼容主流的浏览器。
其实原理很简单:会css仔细看看就明白了，不会css的我说了你也未必明白，嘿嘿，不说了，自己看吧

原理说明：本想用自定义标签cn来代替i的，又是万恶的IE对自定义标签的css支持不良好，所以借用了html标签i来实现。
圆角的实现可以用划线来完成。首先从最上面划下来，第一行 li class=”l1″ 我们设置底部边框为1，这样就划了第一条线，但是两头都没有对上，因为要圆角麻，后面的就不分析了，下面我用图标表示给大家看看：

———
. .
. .
. .
. .
. .
. .
. .
——–

请大家以行为单位看上面的图片。效果在这里。

rdcorner.html
其实上面的实现方法是可用的，可能是我在例子中敲了太多的文字，所以看起来很复杂，我这里总结一下：

第一步：将上面的css添加到你的样式表里面
第二步：代码如下：

panel你完全可以像普通的DIV那样随便定义样式表，包括高度、宽度、float都是可以的！