中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

jquery 插件corner实现圆角边框 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > jquery.js > jquery 插件corner实现圆角边框

jquery 插件corner实现圆角边框

2009-04-12    文章来源:互联网    浏览次数:

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5.    <title>jQuery Corners</title> 
  6.    <script type="text/javascript" src="jquery.js"></script> 
  7.    <script type="text/javascript" src="jquery.corners.min.js"></script> 
  8.      
  9.    <script type="text/javascript"> 
  10.  
  11.    $( function(){$('.roundedd').corners();})  
  12.    </script> 
  13.      
  14.    <style type="text/css"> 
  15.    .roundedd  
  16.    {  
  17.       background-color:#eeeeee;  
  18.    }  
  19.    </style> 
  20.      
  21. </head> 
  22.  
  23. <body> 
  24. <div style="" class="roundedd"> 
  25. class="rounded {10px}" 
  26. </div> 
  27. </body> 
  28. </html> 

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

演示地址:

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

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部