Loading...

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添加到你的样式表里面
第二步:代码如下:

这里就是div中的文字

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

该日志未加标签
发表于 2007-07-30 11:11:48 目录:HTML客户端, 网站技术 [RSS 2.0] 评论功能和ping都不可用
  • 相关阅读
  • 已经有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发表评论如下: 回复

              第一个链接的第一个例子和本文实现的方式一样的,这两个链接资源很不错![quote]我以前比较喜欢用nifty corner…[/quote]

              • 6楼 Zhang 在2007.07.31 08:53发表评论如下: 回复

                你的这种css的方法不方便在于需要修改原来的html代码,柔韧性不强,如果以后不喜欢了,要改回来会很麻烦

                • [...] 自从把心中风格的图画出来之后我就着手修改sandbox的CSS使得能像图那样的实现起来,听从水煮鱼的建议考虑了圆角,但是江东大哥那种圆角我研究了一下发现没看懂,额,只好想了个偷懒的办法把图片做成了圆角,哈哈也是圆角哦~ [...]

                  • 8楼 酷辣客 在2007.10.11 10:10发表评论如下: 回复

                    超好的东东

                    • 9楼 Zhang 在2007.11.29 19:20发表评论如下: 回复

                      我把阅微堂的header部分换了个样子。现在正在试图把导航圆角图片用你说的这种方法实现,不知道是否可以。

                      你给的代码居然不能直接复制,复制出来把行号也带进去了,倒是一个防盗版的好方法啊 :)

                      geshi这个插件是如此,写出来就是给人复制的,防止不了盗版呢

                      • 10楼 阅微堂WordPress主题的一些更新 @ 阅微堂 在2007.11.30 22:36发表评论如下: 回复

                        [...] 其次是参考css实现兼容IE和Firefox主流浏览器的圆角样式这篇文章实现了IE下的圆角。中途遇到一些恶心的HTML渲染bug(?),后来用另一些恶心的办法解决掉。整个过程基本上是体力活。 [...]

                        • 11楼 QQ 在2008.02.03 10:32发表评论如下: 回复

                          代码还是那么多,就没有少点的么。。很小心的说

                          评论分页: 1