jquery插件corner简单快捷实现网页圆角矩形
大家在网站都看到许多的圆角矩形框,它使得页面更加的活泼。那么它是如何实现的呢?学习css的朋友都知道要想实现它需要用ps做好圆角矩形然后进行切图。并且切图实现它还有许多的方法:比如两图片法;三图片法或者是四图片法。但是要实现圆角的效果多多少少在功能上都有些不足,比如两图片法实现的要么是高度自适应宽度固定要么是宽度自适应高度固定。三图片法和两图片法基本上是一样。四图片法虽实现了宽高都自适应。但是在写css的时候也要引入许多的css钩子但是这些钩子没有任何的语义,因此w3c标准不支持这种做法。而现在我们使用jquery插件corner就可以解决这个问题,并且不需要图片。废话不多说下面就介绍一下corner插件。这个插件你可以登录到jquery的官方网站去下载网址是:www.jquery.com。下面我就把实现功能的jquery代码贴出来: <script type=”text/javascript”>$(function(){$(“.round1″).corner(“10px”);})</script>(再提示一下在使用插件前一定要首先引入jquery.js文件)并且在corner(“属性”)的括号里可以更换属性值这里我给提供一张图大家可以按照涂上的方法试验一下。 还有许多相似的软件比如:curycorners和nifty如果大家有兴趣的话可以研究一下。下面为了大家能更好的理解我给出一个demo供大家参考!