讓CSS3圓角兼容所有的瀏覽器

CSS3出現以后，WEB前端的美化變得更加容易，一些原本要用圖片才能實現的外觀，現在用樣式表就可以搞定，也因而使得頁面變得更小。但令人頭疼的是CSS3的很多屬性並不被所有的瀏覽器支持。本人向來喜歡使用圓角矩形作為容器，經過尋找和探索終於找到了實現讓圓角兼容所有瀏覽器的方法。

這個方法是用CSS+JS來實現的。

在需要實現圓角的頁面中引入CurvyCorners（一個JS圓角庫，它采用的全部是CSS3原生屬性），並使用addEvent函數：

    <script type="text/javascript" src="curvycorners.js"></script>
    <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, ".threesnow");
        }
    </script>

 tl, tr, bl, br 分別代表: 左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

然后寫樣式：

    <style>
    .threesnow
    {
        width: 220px;
        height:120px;
        padding: 10px;
        background-color: #DDEEF6;
        border:1px solid #DDEEF6;
         
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
    }    
    </style>

對了，還得把HTML標簽加上，不然顯示什么啊。

    <div class="threesnow">
    </div>

好了，在所有瀏覽器下測試正常，重要的是不用圖片奧。。。。

查看效果：http://www.threesnow.com/code/086/