CSS前缀与非前缀,使用两次？

如果你有一个带有前缀的CSS属性:

-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

并且到达使用前缀版本的浏览器,是否会忽略未加前缀的属性,或者同时处理前缀版本来应用属性两次？

-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

浏览器将按顺序解析属性.例如,如果webkit读取-webkit-transform但随后读取transform它也知道,它将覆盖规则-webkit-transform.这种技术称为CSS-Fallbacks,是级联样式表的一种效果.在阅读完整个规则后,它只会应用一次.

因此,在您的情况下,它将旋转10deg一次,而不是10deg一次又一次10deg

另一个例子是:

.test {
  height: 100px;
  background-color: red;
  background: blue;
}