css 让ie支持css3圆角元素圆角图片方法

在ie6,ie7,ie8中对css3的 border-radius不支持不兼容,让ie浏览器兼容圆角元素和图片的方法

1.下载需要的curvyCorners库

官网下载地址:  http://curvycorners.googlecode.com/files/curvycorners-2.1.zip

官网提供了多个例子下载后可以自己研究,里面包括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>

效果图:

css 让ie支持css3圆角元素圆角图片方法

来源://作者:/更新时间:2014-01-21
相关文章
评论:
验证码:
匿名评论: