CSS3新特性,兼容性,兼容方法总结

1.用于添加边框圆角效果(border-radius):

    兼容性:

        IE9+,Firefox4+,Chrome5+,Safari5+,Opera01.5+,iOS Safari4+,Android Browser2.2+ ,Android Chrome18+

    兼容方法:

        低版本的chrome:-webkit-border-radius:10px;

        低版本的firefox:-moz-border-radius:10px;

        IE6/7/8:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色

2.用于添加阴影效果(box-shadow):

    兼容性:

        IE9.0+,Firefox4.0+,Chrome10.0+,Safari5.1+,Opera10.5+,iOS Safari5.0+,Android Browser4.0+,Android Chrome18.0+

    兼容方法:

        低版本的chrome:-webkit-box-shadow:10px 10px 5px #888;

        低版本的firefox:-moz-box-shadow:10px 10px 5px #888;

        IE6/7/8:

            方法一:

                filter:progid:dXImageTransform.Microsoft.DropShadow(color=#888888,offX=10,offY=10,positives=true);

                缺点:阴影不能边缘模糊

            方法二:

                filter:progid:DXImageTransform.Microsoft.Shadow(color='#0099ff', Direction='120', Strength='10');

                类似于投影效果,缺点:阴影不能边缘模糊

            方法三(推荐)、引入ie-css3兼容文件behavior:url(ie-css3.htc)

                缺点:不支持除了黑色(#000)以外的其他颜色

3.为文字添加阴影(text-shadow):

    兼容性:

        IE10+, Firefox3.5+, Chrome4.0+, Safari6.0+

    兼容方法:

        低版本的chrome:-webkit-text-shadow:1px 1px 1px #000;

        低版本的firefox:-moz-text-shadow:1px 1px 1px #000;

        IE6/7/8:

            方法一、引入ie-css3兼容文件behavior:url(ie-css3.htc);

            方法二、filter:shadow(color=blue,direction=225),direction表示投影角度

你可能感兴趣的:(CSS3新特性,兼容性,兼容方法总结)