Chrome中的圆角无法正常工作

Question

我正在使用以下方法来实现圆角：

-moz-border-radius: 10px;  
border-radius: 10px;  
-webkit-border-radius: 10px;

这适用于除Chrome以外的所有浏览器（不包括IE）。以下是Chrome浏览器的外观：

但在Safari中显示相同的页面。作为Webkit浏览器，为什么这两个浏览器显示有区别？这就是它在Safari中的样子：

为什么会这样？

以下是我正在使用的加价：

HTML：

div#one1 {
  position: relative;
  border-bottom: solid 2px #2D2DFF;
  width: 800px;
  height: 100px;
  color: #FFF;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topleft: 10px;
  border-radius-topleft: 10px;
  border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3);
}

<div id="one1">
  this is one event that is going to happen.....
  <br />and then the other.......
  <br />
</div>

Answer 1

这是Chrome利用的Skia图形库的错误。它可以在Windows和Linux中重现......

但截至今天，它已经在开发频道中修复并可用！ （它会在4到10周之间传递给稳定频道中的每个人）

更多详情：http://paulirish.com/2011/chrome-inset-box-shadow-bug-fixed/

Answer 2

尝试：

border-radius: 10px;
border-right-radius: 0;
-moz-border-radius: 10px;
-moz-border-right-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-right-radius: 0;
-o-border-radius: 10px;
-o-border-right-radius: 0;

Answer 3

要更新此问题

border-radius属性不再需要加前缀，

 <strike>-moz-border-radius-topleft: 10px;</strike>
  <strike>-moz-border-radius-topleft: 10px;</strike>
  border-radius-topleft: 10px;
  border-radius-topleft: 10px;
  <strike>-webkit-border-top-left-radius: 20px;</strike>
  <strike>-webkit-border-top-right-radius: 20px;</strike>

而且，你在声明中缺少破折号（ - ）：

所以，

  border-radius-topleft: 10px;
  border-radius-topleft: 10px;

变为：

  border-top-left-radius: 10px;
  border-top-left-radius: 10px;

样本：

div {
  height: 200px;
  width: 400px;
  background: tomato;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

<div></div>

为了进一步减少CSS，您可以在一行中声明边框半径：

border-radius: 10px 10px 0 0;