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