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

Question

请举例说明在哪些 CSS 属性上，通常需要使用 -webkit-、-moz-、-ms- 和 -o- 这些浏览器前缀来处理兼容性，并写出对应的属性及使用前缀后的代码示例。

Answer 1

以下是一些常见需要使用浏览器前缀的CSS属性及示例：

1. transform属性

用于对元素进行变换，如旋转、缩放、平移等。

• WebKit（Chrome、Safari等）：

.element {
  -webkit-transform: rotate(45deg);
}

• Mozilla（Firefox）：

.element {
  -moz-transform: rotate(45deg);
}

• Microsoft（Edge、IE）：

.element {
  -ms-transform: rotate(45deg);
}

• Opera：

.element {
  -o-transform: rotate(45deg);
}

标准语法：

.element {
  transform: rotate(45deg);
}

2. transition属性

用于定义元素从一种样式转变到另一种样式时的过渡效果。

• WebKit：

.element {
  -webkit-transition: all 0.5s ease;
}

• Mozilla：

.element {
  -moz-transition: all 0.5s ease;
}

• Microsoft：

.element {
  -ms-transition: all 0.5s ease;
}

• Opera：

.element {
  -o-transition: all 0.5s ease;
}

标准语法：

.element {
  transition: all 0.5s ease;
}

3. box-shadow属性

用于给元素添加阴影效果。

• WebKit：

.element {
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

• Mozilla：

.element {
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

• Microsoft：

.element {
  -ms-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

• Opera：

.element {
  -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

标准语法：

.element {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}