兼容所有浏览器的CSS3圆角

在网上看了大量的 解决  css  圆角  兼容的问题，主要是 正对 IE 的   兼容问题，而大部分是  了css3 的属性 来实现  圆角，用  js 的curvycorners  圆角库来 解决 兼容性的问题：

、学习之余 ，来总结一下，用简单文字，表明：

      首先我们新建了一个层，

    在css里面 有了这个层的 一些基本 属性，比如长，宽，

    再在这个层的  css  里面 加入css3 的圆角 属性，如果是  chrome 或者  ff,  就能

实现 圆角了

        css里面 要多加入的 css3 属性:

                      /* chrome浏览器识别 */ 

                    webkit-border-radius :11px;

                           /*     IE浏览器识别                  */

                        -khtml-border-radius: 11px;

                          /*      FF浏览器识别                  */

                             -moz-border-radius: 11px;

                          border-radius: 11px;          //一定要放在最后，否则可能会失效

                                    overflow: hidden;    //可以 可恶，没有 就要有  margin  属性，至于为什么，自己调试。

   然后就来解决 兼容性的 问题：

            首先 要去下载，js的 一个   圆角库：     CurvyCorners 2.1   官方下载 网站：http://www.curvycorners.net/downloads/

    

      然后把里面的 两个js　　文件放在你的　项目　　放置ｊｓ的文件夹下，

　　　然后在模板的 head  标签 里面  加入：

        <script type="text/javascript" src="／＊放在curvycorners的绝对位置＊／curvycorners.src.js"></script>

        <script type="text/JavaScript">

            curvyCorners.addEvent(window, 'load', initCorners);

            function initCorners() {

                var settings = {

                    tl: { radius: 11 },

                    tr: { radius: 11 },

                    bl: { radius: 11 },

                    br: { radius: 11 },

                    antiAlias: true

                }

                curvyCorners(settings, "#hwtj_right");　　　　／／"#hwtj_right　为要　　显示圆角的　的层的　ｉｄ　或者　　ｃｌａｓｓ．

            }

        </script>

＜完＞