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表示投影角度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容