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表示投影角度
网友评论