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

时间：2007-07-30 11:11:48 类别：HTML客户端, Web技术|WEB Tech 本文链接：生活点滴Enjoy Life

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

<style type="text/css">
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;}
</style>
<div class="panel">
<i class="corner">
</i><i class="l1"></i>
<i class="l2"></i>
<i class="l3"></i>
<i class="l4"></i>
<div class="cbody"><img src="http://www.storyday.com/wp-content/themes/cosbeta2/images/logo.jpg" align="left" /><a href="http://storyday.com">storyday</a> 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 <a href="http://feeds.feedburner.com/storydaycom" >rss feed</a> to your reader,thank you.
呵呵，这样做圆角样式很cool吧？少用了图片，而且可以很方便的缩放，更加令人激动的是兼容主流的浏览器。
其实原理很简单:会css仔细看看就明白了，不会css的我说了你也未必明白，嘿嘿，不说了，自己看吧
<br />
</div>
<i class="corner">
</i><i class="l4"></i>
<i class="l3"></i>
<i class="l2"></i>
<i class="l5"></i>
</div>

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


     ---------
   .             .
 .                .
.                  .
.                  .
.                  .
 .                .
   .             .
     --------

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

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

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

<div class="panel">
<i class="corner"></i><i class="l1"></i><i class="l2"></i><i class="l3"></i><i class="l4"></i>
<div class="cbody">这里就是div中的文字</div>
<i class="corner"></i><i class="l4"></i><i class="l3"></i><i class="l2"></i><i class="l5"></i>
</div>
panel你完全可以像普通的DIV那样随便定义样式表，包括高度、宽度、float都是可以的！

该日志未加标签

发表于 2007-07-30 11:11:48 目录：HTML客户端, Web技术|WEB Tech [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback

如果您喜欢本blog，欢迎你的

订阅，谢谢你的支持

上一篇： « wordpress plugin的SVN使用方法下一篇： cos-html-cache2.0正式发布 »

前11排已经被占据了快抢好位置哦

第1楼 Seavin 在 2007.07.30 11:30发表评论如下:

以前自己试着写过，极为繁琐……
期待CSS3直接支持圆角

[r]仔细看看，不繁琐哦！要不我也不会发布的，很多人的实现方式太繁琐，而这个可用的[/r]

[回复他/她]

第2楼北极冰仔在 2007.07.30 13:04发表评论如下:

的确不错，好方法。

[回复他/她]

第3楼北极冰仔在 2007.07.30 13:05发表评论如下:

不过那个阴影不够漂亮。

[回复他/她]

第4楼 muzik 在 2007.07.30 13:51发表评论如下:

我以前比较喜欢用nifty corners
http://www.html.it/articoli/nifty/index.html
用法如
RoundedTop(”div#container”,”#FFF”,”#e7e7e7″);
RoundedBottom(”div#container”,”#FFF”,”#E9F398″);
Rounded(”div#box”,”#C0CDF2″,”#E4E7F2″);
后来用JQuery，就用了jqeury的corner plugin
http://www.malsup.com/jquery/corner/

现在不喜欢圆角,都不用了

[回复他/她]

第5楼 cosβ 在 2007.07.30 14:10发表评论如下: