本文介绍了CSS3在不同浏览器中的兼容性策略，如使用-webkit-、-moz-等前缀，并探讨了优雅降级与渐进增强的解决方案。接着详细阐述了盒模型的三种类型：正常盒模型、怪异盒模型和弹性盒模型。还讨论了多列布局和响应式布局的应用，包括媒体查询的使用，以及如何通过cursor: pointer;设置鼠标形状。
# 二、浏览器兼容方案 -浏览器前缀
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；
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
