用CSS设计圆角

| | Comments (14) | TrackBacks (0)

今天Leavic提到他喜欢CSS设计的圆角,并且是不使用图片的那种,我答应找点资料来。以前知道一点这方面的东西,但没有钻研过,今天倒是有点兴致去找找看个究竟。

很快找到了不下几打的方法,真是各路英雄大显神通。

一般来说,基于CSS的圆角技术分为带图片和不带图片两大类。在这当中,又有使用JavaScript的和不使用JavaScript的之分。所以也是各有千秋,互有利弊。还有就是,处理出来的圆角有的是有锯齿的,甚至还有人就利用锯齿来做圆角,于是就有人挑战要做成无锯齿的圆角。总之,新技术在不断出现,新战友挑战老战友,仅仅这个CSS圆角技术就够热闹了。

使用图片的圆角一般结构相对简单,而不使用图片的则经常是层层相套的div。在页面使用JavaScript有时候也不是那么讨人喜欢。所以,我希望能找到一个不用图片,不用JavaScript,并且结构简单的方法,如果可能的话,消除锯齿最好(废话!)。

这就不是件容易的事了。不过我还是找到了:就是 Spiffy Corners !它符合我的所有条件:纯CSS,没有JavaScript,结构紧凑简洁,没有锯齿,当然也不用图片。最好玩的是,作者把这个技术单独做成一个网站。

下面是结构和CSS,也就是这个页面。你在他的网站可以随意改动颜色做尝试。

<style type="text/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 的这张大集合还会不断更新。希望从中你能找到自己喜欢的圆角。

0 TrackBacks

Listed below are links to blogs that reference this entry: 用CSS设计圆角.

TrackBack URL for this entry: http://www.yangkang.org/cgi-bin/mt/mt-tb.cgi/73

14 Comments

活学活用,举一反三!
在有些地方上下都圆角没有上圆下方好看。

已经改好了,谢谢提供资料。

我倒是觉得大部分的浏览者对页面底部不是太在意,有无圆角,给人最直观的、感觉上的区别应该还是来自上方。

倒是不错。但是原理上还是一样的。javascript的话可以任意调整圆角大小。不过。。。。。谁需要那么多种圆角内?

Coolnalu, 你有段时间没露面了哦.

好东东哦。收藏了。

呵,羽哥哥回来了!

羽哥哥

哈哈,我记得Q版三国里张飞就是这么叫关羽的。

哈哈,yeah.
我再嗮黑一点,就改名叫黑关羽,哈哈

这一声叫的惨啊,我变成了张飞!

好!!!

好!
能否请教一下,代码中标签“b”的意义。

有p用,看不出这样写出来的圆角有什么实际的意义。

以前使用图片设计过圆角矩形,效果要比这个好!
有没有谁需要酒店管理系统????
低价出售!!!

我拷贝代码到dreamwave上面,但是上下两个圆角方型是分开的,是不是因为xhtml的原因?

Leave a comment

About this Entry

This page contains a single entry by Yang published on October 15, 2006 3:32 AM.

我这样开始了CSS学习 was the previous entry in this blog.

分页插件Paged Archives升级 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.