Javascript实现圆角效果

原文地址 :http://www.1t2t34t.cn/article/blog_article_fACQwOcwlMZfcSRh.html

圆角所需的JS打包下载

http://www.1t2t34t.cn/tools/nifty.rar

说明：

由 Alessandro Fulciniti 编写
由 Gainover 翻译
更新
这篇是原创文章. 技术已经获得更多的浏览器支持,而且还增加了一些新的特性, 它被发表在2005年4月第6期上,你可以点此处浏览它. 最后一个版本是 NiftyCube.

在网页设计中,圆角的样式是一个热点的话题:我想有数以百计关于它的文章. 这篇文章将提出我自己的解决方法, 它不需要图片, 而是用CSS来实现. 我们来看看它是如何实现的.

如何让它变成圆角
Nifty Corners 的基本构思是使用一些彩色的线条来使其获得圆角效果. 下面是一个如何获得圆角区域的例子:

<div id="container">
<b>
<b></b> <b></b> <b></b> <b></b>
</b>
<!--这里是内容-->
<b>
<b></b> <b></b> <b></b> <b></b>
</b>
</div>

这个是最基本的 CSS:

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

你可以点 这里 查看最后的效果.一些地方用到了 <b> 这个标签. 我们需要一个内联元素来获得圆角, 而且它能在决大多数各种标签中有效完成其作用. 所以我们选择了b 这个标签,正如Eric Meyer 所说,它没有任何实际的含义,而且比 span要简短.

这个技术可以使用在浮动,或者是绝对位置,或者是百分比宽度的元素上. 但是不能用在固定高度或者有补白的元素. 这些问题可以通过使用附加的封套将内容包容起来加以解决.

已知的BUGS有: 在Opera浏览器中，有圆角效果的元素不能正常显示文本缩进 ,而且在IE浏览器(包括MAC版本以及PC 6.0的版本) 那些没有指定宽度的浮动元素将会被混为一团。

在现在的大多数浏览器上已经得到了支持:这个技术已经在 Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE等浏览器上测试成功. 但是在 IE 5.x PC不能运用.

很简单，是吧？但是我们可以做的更好.

展望DOM
在例子中, 我们可以明白是如何不需要图片来获得圆角的, 这样可以让网页大小少6-8KB. 除此之外,我们还喜欢使用标准的WEB界面以及网页标记,这样我们可以让网页看起来更加简洁.

Nifty Corners 与 CSS 以及 Javascript
下面我们将通过使用一个看起来没有什么作用的<b> 标签 和 javascript 、 DOM 编写的一些函数 让网页上决大多数的区域得到圆角效果, 除了我们看到的这些代码外,而不需要再添加其他的HTML或者CSS . 让我们来看一个运用 Nifty Corners 的例子. 我们可以查看它的源代码, 可以看到里面没有其他的标记. 这里是运用Javascript和CSS来实现的. 这个技术由4个关键部分组成:

CSS 文件 （显示）
CSS file （打印）
Javascript 函数库 （用以获得圆角效果）
函数调用（使你想要使用圆角效果的元素成为圆角矩形区域）
开始的三个组成部分不需要更改, 不论你想实现什么效果. 它们仅需要在任何网页中的 head 部分做如下声明 :

<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>

要了解 第4部分是怎样执行的,你首先要知道 Nifty Corners的javascript函数库如何被调用. 不用担心: 不需要懂得javascript我们一样可以使用Nifty Corners...

javascript 函数
如果你查看了 这个例子的源代码, 你会注意到我留下了被嵌入的CSS以及一部分javascript用以显示这个页面是如何构成的. 看我们看一看被嵌入的javascript代码:

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#nifty","#377CB1","#9BD1FA");
}
</script>

NiftyCheck 函数用以检测浏览器是否支持DOM,使除了IE5.x PC之外其他版本的浏览器正常运行该javascript脚本. 如何检测通过的话, Rounded 函数就会被调用. 它包含4个参数:

CSS selector 指明哪个元素使用圆角效果
Outer color 代表圆角的背景颜色(往往与该矩形所在的外背景颜色一致)
Inner color 代表圆角的填充颜色
第4个参数[可选], 如何设置为 "small" ，将会得到一个较小的圆角。
函数真正强大之处在于它可以通过 CSS 标头[CSS selector（- -自己的术语）]来使目标成为圆角. 可以当作参数的有:

标签类的 标头, 例如. "p" or "blockquote" or "h2"
ID类的 标头, 含有指定标签的元素: 例如 "div#content" 或 "p#news" 再者 "li#home"
Class类的 标头, 含有指定标签的元素:例如 "div.entry"或 "h2.highlight"
复合型的标头, 带有一定限制: 它必须由一个ID类的标头后面加一个HTML标签组成. 正确的例子如: "div#news div" 或者 "ul#menu li"
关于 颜色: 它们是16进制代码与 #号组成的3个或者6个数字. 外部颜色的参数 需要设置为“transparent”（透明）。

第4个参数是可以选的，也可以设置为 "small" 来获得较小的圆角. 看下面这个例子:

window.onload=function(){
if(!!NiftyCheck())
return;
Rounded("div#header","transparent","#C3D9FF","small");
}

同时我提供了另外2个附加的函数，你会发现它们也是很有用处的: RoundedTop与 RoundedBottom函数， 它们的参数与 Rounded函数是一样的， 可以用来设置网页中的矩形仅仅是上面2个角是圆角或者仅仅是下面2个角为圆角, 也可以是设置4个角为圆角，但是上面2个颜色与下面2个颜色不一样.

现在。。。就开始让我们看一些实例吧.

应用实例
下面开始会比较有意思一些，不会是那些枯燥的理论了.. 我写了一些用 Nifty Corners 来实现的例子. 每个例子都会用到文章中提到的Rounded, RoundedTop 和 RoundedBottom函数, 切记它们应该放在以下的代码中:

window.onload=function(){
if(!NiftyCheck())
return;
/* 这里添加被调用的函数 */
}

开始一个一个的瞧一瞧咯！

例1: 一个简单的圆角区域
这个例子之前我们已经看过. 它的函数调用如下:

Rounded("div#nifty","#377CB1","#9BD1FA");

例2: 2个圆角区域
在这个例子中，2个区域产生了圆角效果. 它的JS调用为:

Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4");

例3: 较小一些的圆角效果
此例中，可以看到上面标题较小的圆角效果. 代码如下:

Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");

例4: 新闻框的效果
从例子中，我们可以知道如何获得2种颜色的新闻框效果. 代码:

RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF");

例5: 透明圆角菜单的制作
这个例子可以看出复合型的CSS标头做为对象参数时以及"transparent“ 做为颜色参数的强大功能，仅仅需要用一个简单的javascript函数调用就可以获得一个漂亮的菜单:

RoundedTop("div#nav li","transparent","#E8F0FF");

例6: 一个漂亮的相册的制作
这里将圆角效果运用到相册上得到漂亮的相框效果. 函数调用如下:

Rounded("div#minipics li","#DDD","#FFF");

例7: 圆角表单
通过2个函数调用使表单以及表单中的标签成为圆角效果:

Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small");

例8（最后一个例子）
这是最后一个例子，我们将会用到前面我们用到过的知识. 这一次，我们不用嵌入CSS和javascript，在 head区域我们添加上如下代码:

<link rel="stylesheet" type="text/css" href="roundedPage.css">
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript" src="final.js"></script>

所有的函数调用都写在了 final.js这个文件中,以下是文件中的内容:

window.onload=function(){
if(!NiftyCheck())
return;
RoundedTop("div#container","#FFF","#e7e7e7");
RoundedBottom("div#container","#FFF","#E9F398");
RoundedTop("ul#nav li","transparent","#E8F0FF");
Rounded("div#box","#C0CDF2","#E4E7F2");
Rounded("div#minipics li","#C0CDF2","#FFF");
RoundedTop("div.gradient","#C0CDF2","#B8B8B8");
RoundedBottom("div.gradient","#C0CDF2","#ECECF2");
}

用多了之后，我们可以不用在head区域来嵌入javascrip以及css，而直接把所有的写在一个JS文件中
看起来蛮简单的吧! 如果我们用CSS里的background这个属性来实现以上效果的话, 可能差不多要用到18张图片, 或者更多，而且还会有许多无意义的嵌套和CSS代码. 你可以想象一下文件将会有多少KB? 可能 有18-20KB左右.

文件下载
你可以下载上面提到的所有文件，包括脚本，HTML以及CSS，我已经将它们打包了，点此下载.

题记
James Webb Young 40年前写道： "有技术才能有创新（A technique for producing Ideas）":

创新其实是将所学的知识运用起来形成新的（An idea is nothing more nor less than a new combination of old elements）.
恩, 写出 Nifty Corners 这个程序离不开以下文章的帮助:

Rounded Corners without images 作者：Joshua Sowin ，他的文章让我知道可以不用图片也能完成圆角效果，但是他的文章少了一部分，正因为如此，我就开始自己思考这个问题了
Mountaintop Rounded Corners 作者：Dan Cederholm: 在他的文章中

• 顶:0
• 砸:0