今天Leavic提到他喜欢CSS设计的圆角,并且是不使用图片的那种,我答应找点资料来。以前知道一点这方面的东西,但没有钻研过,今天倒是有点兴致去找找看个究竟。
很快找到了不下几打的方法,真是各路英雄大显神通。
一般来说,基于CSS的圆角技术分为带图片和不带图片两大类。在这当中,又有使用JavaScript的和不使用JavaScript的之分。所以也是各有千秋,互有利弊。还有就是,处理出来的圆角有的是有锯齿的,甚至还有人就利用锯齿来做圆角,于是就有人挑战要做成无锯齿的圆角。总之,新技术在不断出现,新战友挑战老战友,仅仅这个CSS圆角技术就够热闹了。
使用图片的圆角一般结构相对简单,而不使用图片的则经常是层层相套的div。在页面使用JavaScript有时候也不是那么讨人喜欢。所以,我希望能找到一个不用图片,不用JavaScript,并且结构简单的方法,如果可能的话,消除锯齿最好(废话!)。
这就不是件容易的事了。不过我还是找到了:就是 Spiffy Corners !它符合我的所有条件:纯CSS,没有JavaScript,结构紧凑简洁,没有锯齿,当然也不用图片。最好玩的是,作者把这个技术单独做成一个网站。
下面是结构和CSS,也就是这个页面。你在他的网站可以随意改动颜色做尝试。
.spiffy{
display:block;
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#0a67e6;
}
.spiffy1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.spiffy2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.spiffy5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}
.spiffy_content{
padding:0px 5px;
background:#0a67e6;
}
</style>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b>
<div class="spiffy_content">
<!-- 在这里填入文本内容 -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>
应该算是满意了,可我还在继续找。很偶然的,我找到了Christian 在三天前发表的“CSS圆角大集合”,之前我找到的有大半在这里面,也有的没被列在里面。这张表列出了目前主要的圆角技术名称,分别用了几张图片,是否有用JavaScript,是固定的还是浮动的等项比较。非常一目了然,一眼你就知道哪种是你需要的了。要是我早点看到这张表就不会花几个小时到处查了,所以这张表是我查找的最终结果。
当然,Spiffy Corners 也是在其中的。你会看到,表的最下方,还有一个和 Spiffy Corners 同样参数的圆角方案是来自 CSSplay 的 Snazzy Borders。在源文件下你会看得很清楚,我不再写出来。
Christian 的这张大集合还会不断更新。希望从中你能找到自己喜欢的圆角。

活学活用,举一反三!
在有些地方上下都圆角没有上圆下方好看。
已经改好了,谢谢提供资料。
我倒是觉得大部分的浏览者对页面底部不是太在意,有无圆角,给人最直观的、感觉上的区别应该还是来自上方。
倒是不错。但是原理上还是一样的。javascript的话可以任意调整圆角大小。不过。。。。。谁需要那么多种圆角内?
Coolnalu, 你有段时间没露面了哦.
好东东哦。收藏了。
呵,羽哥哥回来了!
羽哥哥
哈哈,我记得Q版三国里张飞就是这么叫关羽的。
哈哈,yeah.
我再嗮黑一点,就改名叫黑关羽,哈哈
这一声叫的惨啊,我变成了张飞!
好!!!
好!
能否请教一下,代码中标签“b”的意义。
有p用,看不出这样写出来的圆角有什么实际的意义。
以前使用图片设计过圆角矩形,效果要比这个好!
有没有谁需要酒店管理系统????
低价出售!!!
我拷贝代码到dreamwave上面,但是上下两个圆角方型是分开的,是不是因为xhtml的原因?