web2.0的网页设计中，圆角成为一个亮点，它比方角更具有亲和力，在实际的网页制作中，圆角却是一个让人头疼的问题。如果仅是少数1，2张页面，或是，颜色、半径、长宽固定的圆角，是很容易解决的，但在数量较多，圆角样式多样的的网页制作时，圆角就成为一个难点了。
尝试过用图片定位来制作圆角，结果不尽如人意，适应性不是很强。
更好的解决办法是利用JS结合CSS来实现圆角边框。Nifty Corners就是一个很好用的方法，虽然也会有一些小缺点。
使用方法：
在head中加入
<link rel=”stylesheet” type=”text/css” href=”niftyCorners.css” mce_href=”niftyCorners.css”>
<link rel=”stylesheet” type=”text/css” href=”niftyPrint.css” mce_href=”niftyPrint.css” media=”print”>
<script type=”text/javascript” src=”nifty.js” mce_src=”nifty.js”></script>
<script type=”text/javascript”>
window.onload=function(){
if(!NiftyCheck())
return;
Rounded(”div#nifty”,”#377CB1″,”#9BD1FA”);
}
</script>
body中代码：
<div id=”nifty”>test</div>
这样id为nifty的这个元素就会变成圆角了。
关于Rounded这个方法，有几个参数，分别是：要使用圆角的元素，需要圆角的角，圆角框外的颜色，圆角框内的颜色，圆角的半径及边框颜色。通过设定这几个参数，可以制作出各种各样的圆角样式。
Rounded(”div#nifty”,”#377CB1″,”#9BD1FA”);
Rounded(”div#header”,”transparent”,”#C3D9FF”,”small”);
RoundedTop(”div#nav li”,”transparent”,”#E8F0FF”);
…
使用时遇到的问题：
1.在使用圆角框的元素内嵌套block元素并让它浮动时，圆角框的宽度和高度都会跟随这个浮动元素变化，或者边框消失不见。此时，需要一个清理浮动的元素或者再另外嵌套一个div。这个问题碰到的比较多。
2.当已经定义了一个元素class=”page”，使用了圆角框后，再对另一个元素class=”page1″使用圆角框。这个page1元素圆角框会多出一层page样式的圆角样式。所以要避免page,page1这样的定义。