为什么[CSS功能]在[浏览器]中不起作用，但在其他浏览器中又起作用呢？

虽然它并非总是如此，最常见的原因，就像一个属性的一个

transition

animation

什么是供应商前缀？

在引入Firefox第4版时，CSS过渡模块规范是“工作草案”。在规范最终定稿之前（实际上，这是达到候选推荐标准的时间），浏览器供应 商
在属性，值和@ -rules中添加了 供应商前缀 ，以防止在规范更改时出现兼容性问题。

供应商前缀正是它们的名称所描述的-
属性或值的特定于供应商的（供应商是指开发浏览器的公司）前缀。它们通常以每种浏览器的特定方式实现，因为属性或值仍处于“候选推荐”阶段之前的许多实验阶段之一，在“候选推荐阶段”中，它们被认为已准备好实现。

最常见的是

-moz-

-webkit-

-ms-

我什么时候需要使用它们？

这完全取决于您要提供的浏览器，使用的属性和值以及开发网站的时间。有些网站试图保留最新列表，但它们并不总是准确或保持最新状态。

以下是一些最常见的前缀属性和值。如果您的项目不支持该属性右侧的注释中提到的浏览器，则无需将其包含在CSS中。

转场

无前缀属性有时带有前缀等价物

-webkit-transition

为了获得完整的浏览器支持，必须执行以下操作：

.foo {    -webkit-transition: <transition shorthand value>;     -moz-transition: <transition shorthand value>;        -o-transition: <transition shorthand value>;          transition: <transition shorthand value>;         }

请注意，

-ms-

transition

变身

.foo {    -webkit-transform: <transform-list>;     -ms-transform: <transform-list>;         transform: <transform-list>;}

动画制作

动画需要有前缀属性 和 前缀，像这样相应的关键帧：

.foo {  -webkit-animation: bar;   -moz-animation: bar;      -o-animation: bar;        animation: bar;         }@-webkit-keyframes bar {  }@-moz-keyframes bar {  }@-o-keyframes bar {  }@keyframes bar {  }

弹性盒

值也可以加上前缀，例如flexbox。注：为了获得最大的浏览器兼容性，具体Flexbox的-属性，如

ordinal-group

flex-flow

flex-direction

order

box-orient

.foo {    display: -webkit-box;      display: -moz-box;         display: -ms-flexbox;      display: -webkit-flex;     display: flex;             -webkit-box-flex: <flex shorthand value>;    -moz-box-flex: <flex shorthand value>;    -webkit-flex: <flex shorthand value>;    -ms-flex: <flex shorthand value>;    flex: <flex shorthand value>;}

计算

.foo {    width: -webkit-calc(<mathematical expression>);     width: -moz-calc(<mathematical expression>);        width: calc(<mathematical expression>);         }

渐变色

有关更多信息，请参见CSS技巧上的CSS渐变。

.foo {    background-color: <color>;     background-image: url(bar.svg);       background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>));       background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>);       background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>);     background-image: -o-linear-gradient(left, <color-stop>, <color-stop>);     background-image: linear-gradient(to right, <color-stop>, <color-stop>); }

注意，

left

to right

left

to left

边界半径（大多数情况下不需要）

.foo {    -webkit-border-radius: <length | percentage>;     -moz-border-radius: <length | percentage>;        border-radius: <length | percentage>;}

盒子阴影（在大多数情况下不需要）

.foo {    -webkit-box-shadow: <box-shadow shorthand value>;     -moz-box-shadow: <box-shadow shorthand value>;        box-shadow: <box-shadow shorthand value>;}

如何使用Javascript实施它们？

要在Javascript中访问带前缀的属性和事件，请使用与CSS前缀等效的camelCase。同样对于事件侦听器

foo.addEventListener('webkitAnimationIteration',bar )

foo

document.getElementsById('foo')

foo.style.webkitAnimation = '<animation shorthand value>';foo.style.mozAnimation = '<animation shorthand value>';foo.style.oAnimation = '<animation shorthand value>';