圆角遮罩图片实现图片圆角

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>圆角遮罩图片实现图片圆角 by ahuinan 2009-5-15</title>
  6. <script language="javascript" type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script>
  7. <script language="javascript" type="text/javascript">
  8. $(function(){
  9. $(".kuang").after("<div class='kuang_div'><img src='http://www.jb51.net/upload/20090518004805261.png' /></div>");
  10. })
  11. </script>
  12. <style type="text/css">
  13. li{
  14. list-style:none;
  15. float:left;
  16. margin-right:20px;
  17. margin-top:20px;
  18. position:relative;
  19. }
  20. img{
  21. border:0;
  22. width:94px;
  23. height:94px;
  24. }
  25. .kuang_div{
  26. position:absolute;
  27. z-index:1000;
  28. left:0;
  29. top:0;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="board">
  35. <ul>
  36. <li><a href="#"><img src="http://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li>
  37. <li><a href="#"><img src="http://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li>
  38. <li><a href="#"><img src="http://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li>
  39. <li><a href="#"><img src="http://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li>
  40. <li><a href="#"><img src="http://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li>
  41. <li><a href="#"><img src="http://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li>
  42. <li><a href="#"><img src="http://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li>
  43. <li><a href="#"><img src="http://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li>
  44. </ul>
  45. </div>
  46. </body>
  47. </html>

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证