当前位置: 代码迷 >> JavaScript >> javascript 兑现圆角,兼容ie
  详细解决方案

javascript 兑现圆角,兼容ie

热度:72   发布时间:2012-11-22 00:16:41.0
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/

  相关解决方案