这个方法是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.οnlοad=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.οnlοad=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.οnlοad=function()
{
Nitty("div#box , h3.main div","big top");
}
</script>
哈哈!多么好的一个技术方法。