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>