Question

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

我先调用border-radius，然后调用-webkit-border-radius。在Firefox中没有问题，但我很惊讶铬有问题

无效代码：

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的错误

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

未加前缀的版本始终应该是订单中的最后一个。

事实上，至少从V31开始，Chrome就一直没有为border-radius做好准备。

来源：CanIUse.com

我认为发生了什么？

Chrome在带有前缀border-radius的属性上窒息，但它并不理解，因此忽略了它。有趣的是，它并没有回到它理解的版本......这是我的第一个声明发挥作用的地方。

建议始终是......没有前缀最后。

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

1 个答案: