# 二、浏览器兼容方案 -浏览器前缀
1、css3的样式并没有得到广泛的支持,不同的浏览器有不同的支持方式
- 针对不同的浏览器内核,书写不同的样式属性
2、浏览器的前缀
- -webkit- 兼容谷歌
- -moz- 兼容火狐
- -ms- 兼容IE
- - o- 兼容欧鹏
3、如:阴影
- -webkit-box-shadow:10px 10px 0px 10px red;
- -moz-box-shadow:10px 10px 0px 10px red;
- -o-box-shadow:10px 10px 0px 10px red;
- -ms-box-shadow:10px 10px 0px 10px red;
- -o-box-shadow:10px 10px 0px 10px red;
4、解决兼容的思想
- 优雅降级:先考虑高版本的浏览器,以视觉效果为主,在低版本浏览器中,以基本视觉为主
- box-shdow:10px 10px 10px 10px red;
- -o-box-shadow:10px 10px 0px 10px red;
- -ms-box-shadow:10px 10px 0px 10px red;
- -moz-box-shadow:10px 10px 0px 10px red;
- -webkit-box-shadow:10px 10px 0px 10px red;
- 渐进增强,先考虑低版本浏览器,一基本效果实现,在高等浏览器中,可以显示更好的睡觉效果
- -webkit-box-shadow:10px 10px 0px 10px red;
- -moz-box-shadow:10px 10px 0px 10px red;
- -o-box-shadow:10px 10px 0px 10px red;