面试题：CSS中常见浏览器前缀及使用场景

Question

请列举出CSS中常见的浏览器前缀，并说明它们分别对应哪些浏览器，以及在什么场景下会使用到这些前缀来处理浏览器兼容性问题。

Answer 1

前缀	对应浏览器	使用场景
-webkit-	Safari、Chrome等WebKit内核浏览器	当使用一些CSS3新特性，如动画（@keyframes）、过渡（transition）、弹性布局（flexbox）、变形（transform）等，在WebKit内核浏览器上需添加此前缀确保兼容性。例如 -webkit-transform: rotate(45deg);
-moz-	Firefox浏览器（Gecko内核）	同样对于CSS3新特性，在Firefox浏览器上使用，比如 -moz-border-radius: 10px; 设置圆角。
-ms-	Internet Explorer和Edge（旧版基于Trident内核）	处理IE和旧版Edge浏览器对CSS3特性支持问题，例如 -ms-flexbox: 1; 用于弹性布局相关属性。
-o-	Opera浏览器（旧版基于Presto内核）	在旧版Opera浏览器上使用CSS3新特性时添加，如 -o-transition: all 0.5s ease; 用于过渡效果。