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

锐拜：CSS实现圆角矩形之函数版

2009-06-25 12:45 423 查看

锐拜：CSS实现圆角矩形之函数版

作者：Rybby E-mail：rybby@163.com
完稿时间：2009-06-24
很
多时候，看到很多网友，问了相同的很多问题：怎样用纯 CSS 样式代码（非圆角图片）实现圆角矩形的效果？

其实呢，挺简单的。但是呢，也挺复杂。这样说，还挺矛盾。

好，先从简单的说。不说，还是先看吧（是否觉得锐拜我挺婆妈）。

<html>

<head>

<style type="text/css">

.box {width:220px; border:0px;}

.cb {height:80px; border:solid #3F556F; border-width:0px 1px;}

.t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4 {margin:0px; padding:0px; height:1px;
border:solid #3F556F; border-width:0px 1px; overflow:hidden;}

.t1 {margin:0px 5px; border-width:1px 0px 0px 0px; height:0px;}

.t2 {margin:0px 3px; border-width:0px 2px;}

.t3 {margin:0px 2px;}

.t4 {margin:0px 1px; height:2px;}

.b1 {margin:0px 1px; height:2px;}

.b2 {margin:0px 2px;}

.b3 {margin:0px 3px; border-width:0px 2px;}

.b4 {margin:0px 5px; border-width:0px 0px 1px 0px; height:0px;}

</style>

</head>

<body>

<div class="box">

<div class="t1"></div>

<div class="t2"></div>

<div class="t3"></div>

<div class="t4"></div>

<div class="cb">这个盒子是存放内容的</div>

<div class="b1"></div>

<div class="b2"></div>

<div class="b3"></div>

<div class="b4"></div>

</div>

</body>

</html>
OK！把上面的代码另存为 .htm 或者 .html
，然后用浏览器打开看看，看到圆角矩形了吧？是不是挺简单！啥！没看到！！！请问阁下您用的是什么浏览器？如果用
FF（firefox）浏览器没看到圆角那是你胡扯，如果用 IE 浏览器没看到圆角那是我糊涂，忘了在 <html> 前面加上 DTD
声明。现在返回加上这句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
，再试试看，终于看到圆角了吧。通常地，在 FF 浏览器上显示很完美的网页，一放到 IE
上就会有很多问题，这之中就有些是跟文档的类型声明（DTD）有关的。从 html 4.0 到 xhtml 1.0
常用的文档声明有过渡型（Transitional）与严格型（Strict），为了编写出标准化与规范化的网站页面，以及适应将来推出的 xhtml
2.0 ，锐拜建议您应该尽量采用 xhtml 1.0 的文档声明，对于 html 4.0
，我们应该学会放弃。啊！扯远了！扯远了！不知不觉就说了一堆闲话，也许是废话，如果因此而浪费了您的宝贵时间，那可就是费话了。

屁话！
刚才说了，应该是看了，用 CSS
实现圆角是挺简单的。简单是从它实现的原理来说的，但是使用起来就太复杂了。在想要实现圆角的地方必须堆加几个 DIV
，然后再设置样式属性，如果一个页面要在多处使用圆角效果，而且还要不同的样式，那工作量可是惊人的、恐怖的、繁琐的。有没有简单的方法呢？答案肯定是有
的，但不是最简单的，锐拜能想到的只有 JavaScript 。JS
这东西可是个好东西，推崇它、讨论它、喜欢它的人从西能排到东。在以前，人们喜欢拿它来设计另人讨厌的弹窗，恶意修改网页，以至于让它有点臭名远扬了。但
随着 Ajax 技术的流行使它又成为 web 编程的明日之星，借助 JS
，程序员可以设计出交互性很强的动态页面，现在越来越多人热爱它、使用它、宣传它……
JS 的好处我就不多说了，现在说一下用 JS
实现圆角矩形的原理。其实没有一点儿技术含量，因为要在实现圆角的地方输入多个 DIV ，所以，我们就使用程序的 for
循环代替繁琐的工作量，仅此而已。再高一点的技术（其实只能算是技巧）也只是用 JS 操作 DOM
节点，这样我们就可以在需要实现圆角的地方只调用一个函数再加几个参数，方便地实现圆角的弧度，效果简直就像变魔术；最终，我们将繁数化成了小事，工作起
来那可真神速。经过胡乱鼓捣一番之后，锐拜写了这个小程序
arccorner.js（弧形角），通过它可以在网页中方便地实现圆角矩形，具体的代码锐拜就不贴出来了，需要使用或者研究的朋友可以到下面这个地址下
载。
arccorner使用方法:

在需要实现圆角效果的html元素的前面或者后面调用arccorner()函数，如

<script type="text/javascript">arccorner("top","normal");</script>

<div class="title">测试</div>

<div class="content">

测试测试测试测试测试测试测试测<br />

测试测试测试测试测试测试测试测<br />

测试测试测试测试测试测试测试测<br />

测试测试测试测试测试测试测试测<br />

</div>

<script type="text/javascript">arccorner("bottom");</script>

arccorner(pst[,dgr[,bgc[,bdc]]])提供四个参数，pst（position）指定
要实现圆角的位
置；dgr（degree）指定圆角的大小，省略此参数时使用默认值（5px），注意！如果需要使用后面的参数时，这个参数不能省略，否则程序会出错。解
决的方法是使用空值，即"" ，后面的 bgc
参数同样；bgc（background-color）指定背景色，默认值（#E5E5FF）,注意使用该参数时不应该漏掉“#”符号,后面的 bdc
也一样；bdc（border-color）指定边框色，默认值（#3E556F）。
注意！！！
应该在页头加载程序文件 arccorner.js ，比如在 <head> 标记里加入此代码

<script type="text/javascript" src="arccorner.js"></script>

如果在 </html> 后面加载的话会没有效果！

pst参数可选值：

top　　　　上面圆角

bottom　　下面圆角

tl　　　　左上角弧化

bl　　　　左下角弧化

tr　　　　右上角弧化

br　　　　右下角弧化

dgr参数可选值:

normal/中圆角(5px)

big/大圆角(8px)

small/小圆角(2px)

bgc 与 bdc 参数为十六进制的 GRB 颜色值，如#000000为黑色，#FFFFFF为白色。

锐拜我开发此程序的目的在于经验分享与技术交流！若您有任何意见或者建议请 E-mail：rybby@163.com
联系锐拜。

程序名称：Arccorner（弧形角）

目前版本：v2.0

程序编辑：Rybby

下载地址：http://rybby.blog.hexun.com/35381241_d.html

程序交流讨论地址：http://rybby.blog.hexun.com/34232885_d.html

转载需知！如需转载本文，请在标题前加上“[转载]”，并在文章开头或结尾加上本文链接地址，谢谢！

生活因分享而快乐！欢迎转载。

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

标签：

相关文章推荐

新的分享

章节导航