边界半径结果不一致答案

【问题标题】：Inconsistant border-radius results边界半径结果不一致
【发布时间】：2012-10-11 21:35:01
【问题描述】：

在 Safari 和 Chrome 中无法获得一致的边框半径结果。火狐没问题。

以下内容在 Safari 或 Chrome 中不会产生任何边框半径：

.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
overflow: hidden

}

具有讽刺意味的是，在我的 DOM 中的其他项目上仅使用不带 -moz 或 -webkit 的“border-radius”，在所有浏览器中都可以工作......所以很困惑。我查看了 Stackoverflow 上的其他一些帖子，并阅读了以前版本的 Safari 中的一个错误，但我的是最新版本，并且还在 Chrome 上产生了问题。

这是适用于所有浏览器的其他边框半径代码：

.hero-cta:before, .nav-wrapper:before, .nav-wrapper:after, #feature-slider:after {
position: absolute;
content: "";
border-radius: 100px;
box-shadow: rgba(212,212,212,100) 550px 50px 150px;
width: 420px;
height: 300px;
opacity: .8

}

这里是开发网站的链接：http://www.plasticmonument.com/biomechaniks/index.html

【问题讨论】：

标签： css

【解决方案1】：

首先，您在某些 css 规则的末尾缺少分号，因此这些规则可能有效也可能无效，具体取决于它们的位置。例如，您的 css 溢出和不透明度规则缺少分号。其次，chrome 支持无前缀边框半径based on this fiddle I made。这意味着您不需要键入 webkit 前缀，因为它们只会浪费代码空间并使整个 css 文件变大。

【讨论】：

最后一个声明不需要分号:)
让他们Justin是合适的，在某些浏览器和/或将来可能会出现问题。
您能分享这方面的文档吗？每个 W3C 示例都省略了最后一个分号。仅在开始新声明时才需要。如果这是你的最后一次，那没关系。单一声明选择器遍布 W3C，它们都没有分号。更不用说，添加它们似乎并不能解决我的问题。
我没有说它会解决你的问题，我说这可能取决于你错过它们的地方。其次，我向您展示了您不再需要 webkit 前缀，这解决了我上面的 jsfiddle 中的问题。

【解决方案2】：

这是因为你如何在网站上使用这些飞行图像，将边框应用到图像而不是 div 上，这将是你想要的方式。

【讨论】：