您的位置：首页 > Web前端 > CSS

简单实用的无图片随意变色css圆角效果!

2008-12-19 17:59 495 查看

声明：本页面信息由凯元 (Anima-no-L) 整理编写，转贴请注明原地址，谢谢！如果你已经是一个精通css的网页设计师，对圆角制作得心应手可以对此文忽略，我写此文是为了把一个简单的东西说得更明了，同时方便存档以后查看。
[align=justify] [/align]
[align=justify]通常我们见过的表格圆角，一般都是用多个小图片拼合而成，但是每个图片虽然一般只有几百字节，但大部分电脑包括服务器都是以KB为单位存储并管理文件，这样如果不使用css颠倒xy的滤镜的话，一个宽高自适应变化的四角圆角容器，（在凯元头脑的概念里，div/table/ul/li/td等等都是容器，相当于一个方框里包容各种各样的东西），至少要4个圆角小图片。这就意味着增加了4 KB的文件,4KB对于网页浏览来说，在各种环境下速度会产生极大的差异！[/align]
[align=justify] [/align]
[align=justify]而且这类圆角图片的背景色和圆角色是固定的，当背景色，圆角色需要变化时又得使用新的圆角图片，我们设计一个页面当然不会只使用一种颜色的圆角，结果就是页面使用的图片容量大增！！[/align]

我做网页遇到这样的问题，一开始只好尽量避免使用圆角。在网上寻找了很多利用代码直接画出圆角的方法。发现有的效果不错，但是代码太复杂，有的还是得利用图片+css，经过寻找总结，这里讲解一下一种其中有色背景的，非勾线框的纯css圆角，而且代码相当简单，容易理解。

其实这种效果就是利用细横线由 (最宽处) 到圆角最顶端(最窄) 的不断缩短堆砌，形成视觉合成，拼合成圆角。如何把这些横线像砌金字塔一样的准确砌起来就是关键。凯元找到的代码是利用了4条线砌合成对称圆角，线拆分图如下：

下面我把圆角的css贴出/**/里面是注解，b为相当于div的容器单位，不过更小这么理解你就不会头痛了。

b.rtop, b.rbottom{display:block} /*定义顶部和底部边角为“块”属性*/
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden} /*定义以“块”显示，每条b线高度1px，里面内容溢出指定尺寸就隐藏*/

b.r1{margin: 0 5px} /*css简写对称的容器左右外边距5px,下面一样越来越短最短那条高度有点变化*/
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height:2px}

上面只是没有颜色的圆角，如果要加入颜色，为了方便变换圆角的颜色和背景色，我把颜色代码拆开来写，比如像这样：
.cwt{background:#fff}/*定义容器背景色为白色，名cwt可以根据自己喜好换，cwt意思是color white ,凯元个人习惯是不超过4个字符*/
.cqr{background:#FFF0F5}/*定义背景色浅粉红色/

另外需要一个装整个圆角容器的大容器，还有装上下圆角之间的内容的容器，这个东西最好也给个宽高定义，好控制圆角框。
.w300{width:300px}/*总容器的宽度随便*/
.ht1{height:200px}/*高度其实可以不设，让圆角容器自己撑开*/
.w1{width:100%}/*内部内容容器的宽度100%是为了和上下圆角贴合，当然你可以设其他的试试看就知道了*/

让我们把完整的css格式写清楚：

<style>
b.rtop, b.rbottom{display:block}
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height:2px}

.cwt{background:#fff}
.cqr{background:#FFF0F5}
.w1{width:100%}
.w300{width:300px}
</style>

容器的构架页面中如下应用：

应用在需要圆角的位置，下面是一个独立的圆角容器：

<div class="w300">
<b class="rtop cwt"><b class="r1 cqr"></b><b class="r2 cqr"></b><b class="r3 cqr"></b><b class="r4 cqr"></b></b>
<ul class="w1 cqr">
凯元的圆角效果试验。
</ul>
<b class="rbottom cwt"><b class="r4 cqr"></b><b class="r3 cqr"></b><b class="r2 cqr"></b><b class="r1 cqr"></b></b>
</div>
这样就完成这段白色底粉红色圆角的网页容器代码了，<ul>.....这段是指定包内容的。cwt定义了圆角四端圆弧外的底色（背景色），cqr定义了每条b线和圆角内容器的颜色。
怎么样？简单吧？

如果要更换圆角的背景色，圆角色，在最红的 cwt cqr这两个指定颜色的代码上下功夫即可，当然也可以用其他的颜色定义代码替换。

如果内容比较多的，全部装在一个ul里面太麻烦，而且不利于代码解析，因为我们知道ie还是对一个个完整的容器（如<div>....</div>就是一个完整的容器）分别下载完才开始解析显示的。全部装在一起，当然没有分开多个容器分别下载、显示的速度快。

这时候我们可以拆开上、下部分圆角块，形成两个独立的容器，即上下两个对称半圆角容器，中间加以多个独立的容器无缝拼合，只要注意中间容器的宽度和背景色和圆角吻合即可。

这是css3出来以前目前我发现的最简单的css圆角效果了，如此做出的圆角不仅颜色替换方便，代码更简洁。

下面把上面的代码以一个完整的html写出，大家可以自己复制存为.htm运行试验：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>凯元的圆角试验</title>
<style>
body{background:#fff;font-size:12px;text-align:center} /*指定页面整个body背景白色，字体默认12px，内部文字、内容器居中*/
ul{margin:0px;padding:0px} /*指定所有<ul></ul>的边距和内部填充距默认全部为0，否则最原始默认是非0会撑开容器*/
b.rtop, b.rbottom{display:block}
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height:2px}
.cwt{background:#fff}
.cqr{background:#FFF0F5}
.w1{width:100%}
.w300{width:300px}
.ht1{height:100%}
</style>
</head>
<body>
<div class="w300 ht1">

<b class="rtop cwt"><b class="r1 cqr"></b><b
class="r2 cqr"></b><b class="r3 cqr"></b><b
class="r4 cqr"></b></b>
<ul class="w1 cqr">
凯元的圆角效果试验。
</ul>

<b class="rbottom cwt"><b class="r4 cqr"></b><b
class="r3 cqr"></b><b class="r2 cqr"></b><b
class="r1 cqr"></b></b>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航