jquery插件corner实现圆角边框的方法

239 阅读 0 评论 158 点赞

我是靠谱客的博主拉长大门，最近开发中收集的这篇文章主要介绍jquery插件corner实现圆角边框的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了jquery插件corner实现圆角边框的方法。分享给大家供大家参考。具体如下：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

   <title>jQuery Corners</title> 

   <script type="text/javascript" src="jquery.js"></script> 

   <script type="text/javascript" src="jquery.corners.min.js"></script> 

   <script type="text/javascript"> 

   $( function(){$('.roundedd').corners();})  

   </script> 

   <style type="text/css"> 

   .roundedd  

   {  

      background-color:#eeeeee;  

   }  

   </style> 

</head> 

<body> 

<div style="" class="roundedd"> 

class="rounded {10px}"

</div> 

</body> 

</html>

这里测试了一下发现一个问题bug：若background-color:#eeeeee;写成background-color:red;或 background-color:yellow;在火狐没问题，如果是IE的话就看不到效果了，所以建议用颜色RGB代码。

演示地址为：

http://www.malsup.com/jquery/corner/

希望本文所述对大家的jQuery程序设计有所帮助。