Chrome中的圆角不起作用答案

【问题标题】：Rounded corners in Chrome not workingChrome中的圆角不起作用
【发布时间】：2010-12-17 05:16:07
【问题描述】：

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

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

【问题讨论】：

如果你想让border-radius 和box-shadow 也能在IE 中工作，请查看css3pie.com

标签： google-chrome css rounded-corners

【解决方案1】：

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

但从今天开始，它已修复并在开发频道中可用！（稳定频道中的每个人都会收到 4 到 10 周）

【讨论】：

【解决方案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;

【讨论】：

在这里查看不同浏览器的效果：quirksmode.org/css/borderradius.html
所有四个角都一样.....在提供的图像中，我只显示了一个角，我也尝试了您的解决方案，但不知何故 chrome 无法正确呈现。我花了几个小时试图弄清楚发生了什么，但找不到任何问题......
当您删除 box-shadow 规则时，您是否得到正确的圆角？
已知错误：stackoverflow.com/questions/2937731/…

【解决方案3】：

更新此问题

border-radiusproperty 不再需要前缀，

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

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

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

border-radius: 10px 10px 0 0;

【讨论】：