美文网首页
CSS3新特性,兼容性,兼容方法总结

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

作者: 余生LHX | 来源:发表于2017-11-13 09:57 被阅读0次

    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新特性,兼容性,兼容方法总结

          本文链接:https://www.haomeiwen.com/subject/juvamxtx.html