如何改变网页上方方正正的div和table等元素，一直是个比较繁琐的问题。使用单纯的css是无法做出圆角效果的，传统的做法是制作圆角的图形，再使用表格或者css定位加入到目标的四个角。比如wordpress的这个模板是通过三个图片实现：一个是整个页面的背景图（垂直双线背景），两个分别是上下端带两个圆角的背景图。
而使用openrico可以非常方便的给页面元素加上圆角效果。只需要一个javascript语句。
openrico需要prototype.js库。首先在页面包含js文件：
<script src="include/prototype.js" type="text/javascript"></script>
<script src="include/rico.js" type="text/javascript"></script>
然后，假设需要增加圆角的元素为
<div class="mainmenu" style="background-color: #268dcf">
<div style="padding-right: 5px; padding-left: 5px;
padding-bottom: 5px; padding-top: 5px;
text-align: center">测试</div>
</div>
现在只需要一个简单的js语句
<script>
new Effect.Round('div', 'mainmenu' ,{compact:true});
</script>
注意这里是通过new Effect.Round使所有class为mainmenu的div都加入圆角修饰。
也可以通过对象id来增加圆角修饰，比如对于
<div id="test">
就可以使用
var roundCorners = Rico.Corner.round.bind(Rico.Corner);
roundCorners(test);更多具体的使用可以见openrico.org网站。
0 Comments.