属性

-webkit- Chrome 和 Safari 浏览器私有属性

-moz- Firefox 浏览器私有属性

-ms- Internet Explorer 浏览器私有属性

-o- Opera 浏览器私有属性

实例

-webkit-box-shadow: -4px 7px 46px 2px rgb(0 0 0 / 10%); /*Safari & Chrome(Webkit)*/
-moz-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); /*Firefox(Gecko)*/
-ms-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); /*Internet Explorer(Trident 现已弃用)*/
-o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); /*Opera(Presto[旧],Webkit[新])*/
box-shadow: -4px 7px 46px 2px rgb(0 0 0 / 10%); /*符合 W3C 标准的统一标识版本*/

拓展

使用这些私有属性(即版本前缀),才能保证 CSS3 的属性在特定浏览器及版本的渲染引擎中生效。

目前移动端的浏览器相对统一采用 Webkit 渲染引擎,兼容移动端时只需要带 -webkit- 私有属性即可。

前端渲染过程都是自上而下,如上实例:标以私有属性的版本放于前面符合 W3C 标准的统一标识版本放到最后

随着浏览器的升级,目前大多数新版本浏览器都已经支持不带私有属性的写法,所以标以私有属性只是为了兼容低版本的浏览器,不带私有属性的才是标准属性。


何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!
分类: 前端开发

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注