ie支持css3圆角实现的俩种方式

1、curvycorners.js引用实现

<title>css3圆角</title>

<script src="curvycorners.js" type="text/javascript"></script>

<style>

.roundedCorners

{

width: 200px;

height: 200px;

padding: 10px;

background-color: Beige;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

</style>

<script type="text/JavaScript">

addEvent(window, 'load', initCorners);

function initCorners() {

var setting = {

tl: { radius: 10 },

tr: { radius: 10 },

bl: { radius: 10 },

br: { radius: 10 }, //tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)

antiAlias: true

}

curvyCorners(setting, ".roundedCorners");

}

</script>

<div class="roundedCorners">

</div>

2、ie-css3.htc，IE利用VML矢量可标记语言作为画笔汇出圆角

<title>测试主机Content-Type</title>

<style type="text/css">

.roundedCorners

{

width: 500px;

height: 400px;

background-color: blue;

padding: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

behavior: url(ie-css3.htc);

}

</style>

<div class="roundedCorners">

这个页面是用以测试主机是否有正确的content-type。

</div>

curvycorners.js下载

ie-css3.rar下载

原文链接

http://www.css3-html5.com/CSS3-Tutorial/20110711700.html

http://www.css3-html5.com/CSS3-Tutorial/20110711701.html