css 让ie支持css3圆角元素圆角图片方法
在ie6，ie7，ie8中对css3的 border-radius不支持不兼容，让ie浏览器兼容圆角元素和图片的方法
1.下载需要的curvyCorners库
官网下载地址:
官网提供了多个例子下载后可以自己研究，里面包括html元素设置圆角的，ie浏览器设置圆角图片的方法
2.代码例子如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>curvyCorners Demo 2</title>
<script type="text/JavaScript" src="../curvycorners.src.js"></script>
<style>
#myBox {
margin: 0.5in auto;
color: #fff;
width: 800px;
height: 550px;
padding: 20px;
text-align: left;
background-image: url(backtest.jpg);
background-repeat: no-repeat;
broder-radius:20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
</style>
<script type="text/JavaScript">
if (curvyBrowser.isIE) {
curvyCorners.addEvent(window, 'load', initCorners);////触发事件，调用initCorners方法
function initCorners() {
var settings = {
tl: { radius: 20 }, //左上圆角半径
tr: { radius: 20 }, //右上圆角半径
bl: { radius: 20 }, //左下圆角半径
br: { radius: 20 }, //右下圆角半径
antiAlias: true //圆角部分的状态 true：完美圆角 false：失真圆角
}
/*
Usage:
curvyCorners(settingsObj, selectorStr);
curvyCorners(settingsObj, Obj1[, Obj2[, Obj3[, . . . [, ObjN]]]]);
selectorStr ::= complexSelector [, complexSelector]...
complexSelector ::= singleSelector[ singleSelector]
singleSelector ::= idType | classType
idType ::= #id
classType ::= [tagName].className
tagName ::= div|p|form|blockquote|frameset // others may work
className : .name
selector examples:
#mydiv p.rounded
#mypara
.rounded
*/
curvyCorners(settings, "#myBox"); //操作对象为id="myBox"的DIV
}
}
</script>
</head>
<body>
<h1>curvyCorners Demo 2</h1>
<div id="myBox">
</div>
<p>Believe it or not, in IE you need to add something like this to see the
bottom corners.</p>
</body>
</html>
效果图：
来源：//作者：/更新时间：2014-01-21
顶
踩
相关文章：
