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

【问题标题】：-webkit-border-radius not work in Chrome Version 44.0.2403.89 m-webkit-border-radius 在 Chrome 版本 44.0.2403.89 m 中不起作用
【发布时间】：2015-10-12 11:35:12
【问题描述】：

今天，我在 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;
}

&lt;div&gt;&lt;/div&gt;

所以我将代码更改为在-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;
}

&lt;div&gt;&lt;/div&gt;

编辑：

现在我用

   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;
}

&lt;div&gt;&lt;/div&gt;

编辑：

这是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>

【问题讨论】：

@Paulie_D 一针见血。如果他将其发布为答案，我会 sooo 投票。 [咳咳。刚刚意识到斜体看起来很讽刺。我把它们留在里面，但我在这里说实话。]
@Paulie_D 检查我的编辑。我在顶部添加了无前缀边框半径，并将值添加为0px 30px 0px 30px，它在 chrome 中工作。如何？但是0px 30px

标签： css google-chrome

【解决方案1】：

无前缀版本应始终排在最后。

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

来源：CanIUse.com

我认为发生了什么？

Chrome 因无法理解的前缀 border-radius 属性而窒息，因此忽略了它。有趣的是，它并没有回退到它确实理解的版本......这就是我的第一个陈述发挥作用的地方。

建议一直是...无前缀最后。

【讨论】：

检查我的编辑。我在顶部添加了无前缀边框半径，值为 0px 30px 0px 30px，它在 chrome 中工作。如何？但是 0px 30px
事实是……我的主要观点仍然是……您的声明顺序错误。如果您愿意，可以将其作为错误报告给 Chrome 开发团队，但这并不是真正的错误……只是您的实施中的错误。
@Paulie_D 请允许我不同意。使用 OP 原始顺序中的声明，浏览器应该要么识别前缀版本，在这种情况下整个事情就可以工作，或者忽略前缀版本（使用无前缀版本），在这种情况下它也可以工作。因此，如果没有，那肯定是浏览器中的错误。带前缀的版本不应该突然开始表现与不带前缀的不同！
@TamilSelvan 如果您使用only 前缀版本，或only 无前缀版本，它是否按预期工作？
@Paulie_D 我忘了提到将无前缀版本放在最后的规则，虽然在任何情况下都不错，但只有在前缀版本有效的情况下才真的必要不同（比如渐变）。