一个实现圆角的好技术

这个方法是Alessandro Fulciniti 创造的 Nifty Corners Cube代码。

首先从http://www.html.it/articoli/niftycube/NiftyCube.zip上下载Nifty Corners Cube方法的组件，该组件包含一个CSS文件和一个JavaScript文件。

网页引入所用的JavaScript文件：

<script type="text/javascript" src="/_assets/js/niftycube.js"><script>这块并不需要引入css，只需要引入js，css完全由js处理。

<script type="text/javascript">

window.onload=function()

{

    Nitty("div#box","big");

}

</script>

html 结构如下图：

<div id="box">

    <h2>Marquee selectus</h2>

    <p>^^^^^^^^^^^^^</p>

</div>

这种方法添加圆角几乎不需要开发人员做任何工作，并且js会自动判断圆角需要的颜色，一般是和body的颜色保持一致。

选中标签的圆角大小可选择一下四个关键字：none,small,normal(默认值),和big。small相当于2个像素的大小，normal是5个像素，big是10个像素。

选择符支持：类型选择符 ，ID选择符，类选择符，ID后代选择符，类后代选择符，组选择符。

如果要选择多个标签，使其圆角可使用逗号将其分开，如下

<script type="text/javascript">

window.onload=function()

{

    Nitty("div#box   , h3.main div","big");

}

</script>

Nifty Corners Cube 技术还支持4个角的中指定角为圆边

支持关键字：tl左上角  tr右上角  bl左下角  br右下角  top左右上角 bottom左右下角 left左上下角  right右上下角  all所有

示例：

<script type="text/javascript">

window.onload=function()

{

    Nitty("div#box   , h3.main div","big  top");

}

</script>

哈哈!多么好的一个技术方法。