google-chrome - Chrome 中的圆 Angular 不起作用

Question

我使用以下方法来实现圆 Angular :

-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 中重现...

但从今天开始，它已修复并可在开发 channel 中使用! (稳定 channel 中的每个人都需要 4 到 10 周的时间)

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