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

用jquery实现的图片圆角效果代码。

运行后请刷新一次。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>圆角遮罩图片实现图片圆角 by ahuinan 2009-5-15</title><style type="text/css"> li{ list-style:none; float:left; margin-right:20px; margin-top:20px; position:relative; } img{ border:0; width:94px; height:94px; } .kuang_div{ position:absolute; z-index:1000; left:0; top:0; } </style></head><body> <div id="board"> <ul> <li><a href="#"><img src="https://ss.0133.cn/article/aa/2e/5b/aa2e5b324715d335e0e49c9026e4c987.jpg-600" class="kuang"/></a></li><li><a href="#"><img src="https://ss.0133.cn/article/aa/2e/5b/aa2e5b324715d335e0e49c9026e4c987.jpg-600" class="kuang"/></a></li><li><a href="#"><img src="https://ss.0133.cn/article/aa/2e/5b/aa2e5b324715d335e0e49c9026e4c987.jpg-600" class="kuang"/></a></li><li><a href="#"><img src="https://ss.0133.cn/article/aa/2e/5b/aa2e5b324715d335e0e49c9026e4c987.jpg-600" class="kuang"/></a></li><li><a href="#"><img src="https://ss.0133.cn/article/aa/2e/5b/aa2e5b324715d335e0e49c9026e4c987.jpg-600" class="kuang"/></a></li><li><a href="#"><img src="https://ss.0133.cn/article/aa/2e/5b/aa2e5b324715d335e0e49c9026e4c987.jpg-600" class="kuang"/></a></li><li><a href="#"><img src="https://ss.0133.cn/article/aa/2e/5b/aa2e5b324715d335e0e49c9026e4c987.jpg-600" class="kuang"/></a></li><li><a href="#"><img src="https://ss.0133.cn/article/aa/2e/5b/aa2e5b324715d335e0e49c9026e4c987.jpg-600" class="kuang"/></a></li></ul></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上就是jquery 圆角遮罩图片实现图片圆角的详细内容，更多请关注0133技术站其它相关文章！