看见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都是可以的!

前11排已经被占据了 快抢好位置哦
以前自己试着写过,极为繁琐……
期待CSS3直接支持圆角
[r]仔细看看,不繁琐哦!要不我也不会发布的,很多人的实现方式太繁琐,而这个可用的[/r]
的确不错,好方法。
不过那个阴影不够漂亮。
我以前比较喜欢用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/
现在不喜欢圆角,都不用了
第一个链接的第一个例子和本文实现的方式一样的,这两个链接资源很不错![quote]我以前比较喜欢用nifty corner…[/quote]
你的这种css的方法不方便在于需要修改原来的html代码,柔韧性不强,如果以后不喜欢了,要改回来会很麻烦
[...] 自从把心中风格的图画出来之后我就着手修改sandbox的CSS使得能像图那样的实现起来,听从水煮鱼的建议考虑了圆角,但是江东大哥那种圆角我研究了一下发现没看懂,额,只好想了个偷懒的办法把图片做成了圆角,哈哈也是圆角哦~ [...]
超好的东东
我把阅微堂的header部分换了个样子。现在正在试图把导航圆角图片用你说的这种方法实现,不知道是否可以。
你给的代码居然不能直接复制,复制出来把行号也带进去了,倒是一个防盗版的好方法啊
[...] 其次是参考css实现兼容IE和Firefox主流浏览器的圆角样式这篇文章实现了IE下的圆角。中途遇到一些恶心的HTML渲染bug(?),后来用另一些恶心的办法解决掉。整个过程基本上是体力活。 [...]
代码还是那么多,就没有少点的么。。很小心的说