CSS兼容 -webkit-xxx 的含义

背景：

-webkit- 是 WebKit 浏览器引擎所采用的浏览器私有前缀，用于支持实验性或未被标准化的 CSS 属性和特性。

-webkit 是表示针对 safari、chrome 浏览器支持（webkit内核的私有属性），

-ms表示针对 IE 浏览器支持私有属性。

-moz-是Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。

-webkit-

在 WebKit 浏览器中，开发者可以在 CSS 属性前加上 -webkit- 前缀，以启用 WebKit 浏览器引擎的私有实现。例如，-webkit-border-radius 属性可以设置元素的圆角。

以下是一个使用 -webkit- 前缀的示例代码：

.box {
  -webkit-border-radius: 10px;
  border-radius: 10px;
} 

如下表示的是在 X 轴向右移动 50px, Y 轴向下移动 100px。

div {
  -ms-transform: translate(50px, 100px);
  -webkit-transform: translate(50px, 100px);

  transform: translate(50px, 100px);
}

- `scale`：

缩放，1 为原始大小。参数正数时放大，负数缩小。属性值为一个时，`x/y` 轴同时缩放；属性值为两个值时，分别控制 `x`、`y` 轴的缩放。

- `rotate`：

水平旋转，属性值格式为 `Xdeg`。`X` 为正数时，顺时针旋转；为负数时，逆时针旋转

- `translate`：

平移，基于 `XY` 轴重新定位元素。属性值为一个时，`x`、`y` 轴参数相同；为两个时，`x`、`y` 轴分别定位

- `skew`：将元素沿水平方向倾斜变形。属性值为一个时，`x/y` 轴参数相同；为两个时，`x`、`y` 轴各自倾斜。

注意：

需要注意的是，使用 -webkit- 前缀的属性并不是 W3C 标准中定义的标准 CSS 属性，因此可能不被所有浏览器支持。因此，在使用 -webkit- 前缀的属性时，应该尽可能地提供一个标准的 CSS 属性作为备选方案，以确保在不同的浏览器中都能正确地显示