html - 用于跨浏览器兼容性的过渡属性

Question

我有以下 CSS3 代码，适用于常规浏览器和支持 -webkit- 的浏览器。

但是，我应该为以下属性设置什么值:

-webkit-transition-property: ????;

因为像box-shadow这样的值对于-webkit-相关的用法是-webkit-box-shadow，然后，对于在 property 之上，我应该使用 box-shadow 还是 -webkit-box-shadow？

Answer 1

如果您想要对本身也使用供应商前缀的属性进行转换，则需要添加它们。

示例 CSS:

.my-class {
    -webkit-transition: -webkit-box-shadow 1s;
       -moz-transition:    -moz-box-shadow 1s;
        -ms-transition:     -ms-box-shadow 1s;
         -o-transition:      -o-box-shadow 1s;
            transition:         box-shadow 1s;
}

对于不带前缀的属性，它的工作方式如下:

.other-class {
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
        -ms-transition: color 1s;
         -o-transition: color 1s;
            transition: color 1s;
}

浏览器支持:

• CSS3 transition
• CSS3 box-shadow