javascript 实现圆角,兼容ie

效果图:


点击查看效果:http://www.miiceic.org.cn/ios/

 

<!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>iPhone与iPad开发实战</title>
 </head>
<script type="text/javascript" src="http://www.miiceic.org.cn/templets/new/images/curvycorners.js"></script>
<style>
.roundedCorners{width: 101px;height:101px;background-color: #e9e9e9;border:1px solid #ccc;-webkit-border-radius: 6px;-moz-border-radius: 6px;float:left;}
.jpkctsaleftimg{ text-align:center; padding-top:20px;}
.jpkctsalefttxt{ text-align:center; padding-top:5px; font-size:14px; font-weight:bold;}
</style>
 <body>
 <script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
</script>
<div class="roundedCorners"><div class="jpkctsaleftimg"><img src="http://www.miiceic.org.cn/templets/new/images/jpjc.png" width="48" height="48" /></div>
  <div class="jpkctsalefttxt">基础</div></div>
 </body>
</html>

 

点击查看效果:http://www.miiceic.org.cn/ios/

posted @ 2012-03-21 09:07  通海口  阅读(358)  评论(1编辑  收藏  举报