CSS3 作为页面样式的表现语言, 增加了很多新的属性, 但是部分 css3 属性在一些浏览器上还处于试验阶段, 所以为了有效的显示 css3 的样式, 对应不同的浏览器内核需要不同的前缀声明.
在我们使用 css3 时可以使用浏览器引擎前缀来解决.
主流浏览器引擎前缀:
-webkit- (谷歌, Safari, 新版 Opera 浏览器, 以及几乎所有 iOS 系统中的浏览器 (包括 iOS 系统中的火狐浏览器); 简单的说, 所有基于 WebKit 内核的浏览器)
- -moz- (火狐浏览器)
- -o- (旧版 Opera 浏览器)
- -ms- (IE 浏览器 和 Edge 浏览器)
使用这些前缀, 才能保证 css3 的属性在特定浏览器渲染引擎下生效. 统一引擎一般不识别其它引擎的前缀, 目前移动端的浏览器相对比较统一, 都是采用的 webkit 引擎, 所以如果我们只需要兼容移动端, 只需要带 - webkit - 前缀即可.
在使用 css3 新属性的时候, 一般需要把带有前缀的属性放于前面, 把不带前缀的版本放到最后一行:
示例:
- -webkit-transition: all 4s ease;
- -moz-transition: all 4s ease;
- -ms-transition: all 4s ease;
- -o-transition: all 4s ease;
- transition: all 4s ease;
推荐: CSS 文档 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/14047.html