css - -webkit-border-radius 在 Chrome 版本 44.0.2403.89 m 中不起作用

Question

今天，我在 Chrome 浏览器版本 44.0.2403.89 m 中遇到了 -webkit-border-radius 的问题。

我先调用了 border-radius，然后调用了 -webkit-border-radius。在 firefox 中没有问题，但令我惊讶的是 chrome 有问题

无效代码:

div {
  width: 100px;
  height: 40px;
  background-color: green;
  border-radius: 0px 30px;
  -moz-border-radius: 0px 30px;
  -webkit-border-radius: 0px 30px;
}

<div></div>

所以我将代码更改为在-webkit-border-radius 之后调用border-radius，它起作用了。谁能解释一下发生的问题。

工作代码:

div {
  width: 100px;
  height: 40px;
  background-color: green;
  -moz-border-radius: 0px 30px;
  -webkit-border-radius: 0px 30px;
  border-radius: 0px 30px;
}

<div></div>

编辑:

现在我用

   border-radius: 0px 30px 0px 30px;
  -moz-border-radius: 0px 30px 0px 30px;
  -webkit-border-radius: 0px 30px 0px 30px;

它的作品。怎么办？

div {
  width: 100px;
  height: 40px;
  background-color: green;
  border-radius: 0px 30px 0px 30px;
  -moz-border-radius: 0px 30px 0px 30px;
  -webkit-border-radius: 0px 30px 0px 30px;
}

<div></div>

编辑:

这是chrome的一个bug

div {
  width: 200px;
  height: 200px;
  margin: 1em;
}
.a {
  background-color: green;
  border-radius: 0px 30px;
  -moz-border-radius: 0px 30px;
  -webkit-border-radius: 0px 30px;
}
.b {
  background-color: green;
  -moz-border-radius: 0px 30px;
  -webkit-border-radius: 0px 30px;
  border-radius: 0px 30px;
}
.c {
  background-color: green;
  border-radius: 0px 30px 0px 30px;
  -moz-border-radius: 0px 30px 0px 30px;
  -webkit-border-radius: 0px 30px 0px 30px;
}
.d {
  background-color: green;
  border-radius: 0px 30px;
  -moz-border-radius: 0px 30px;
  -webkit-border-radius: 0px 30px;
}
.e {
  background-color: green;
  -moz-border-radius: 0px 30px 0px 30px;
  -webkit-border-radius: 0px 30px 0px 30px;
}

<div class="a">
  background-color: green;
  <br />border-radius: 0px 30px;
  <br />-moz-border-radius: 0px 30px;
  <br />-webkit-border-radius: 0px 30px;
  <br />
</div>
<div class="b">
  background-color: green;
  <br />-moz-border-radius: 0px 30px;
  <br />-webkit-border-radius: 0px 30px;
  <br />border-radius: 0px 30px;
  <br />
</div>
<div class="c">
  background-color: green;
  <br />border-radius: 0px 30px 0px 30px;
  <br />-moz-border-radius: 0px 30px 0px 30px;
  <br />-webkit-border-radius: 0px 30px 0px 30px;
  <br />
</div>
<div class="d">
  background-color: green;
  <br />border-radius: 0px 30px;
  <br />-moz-border-radius: 0px 30px;
  <br />-webkit-border-radius: 0px 30px;
  <br />
</div>
<div class="e">
  background-color: green;
  <br />-moz-border-radius: 0px 30px 0px 30px;
  <br />-webkit-border-radius: 0px 30px 0px 30px;
  <br />
</div>

Answer 1

没有前缀的版本应该总是在顺序中排在最后。

事实上，Chrome 至少从 V31 开始就没有为 border-radius 添加前缀。

来源:CanIUse.com

我认为发生了什么？

Chrome 在它不理解的带前缀的 border-radius 属性上窒息，所以它忽略了它。有趣的是，它并没有退回到它确实理解的版本……这就是我的第一个陈述发挥作用的地方。

建议一直是……没有前缀的last。