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/