Question

在获得一致的border-radius问题时会导致Safari和Chrome出现问题。 Firefox很好。

以下内容不会在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中的其他项目上使用'border-radius'而不使用-moz或-webkit，可以在所有浏览器中使用......太混乱了。我查看了Stackoverflow上的一些其他帖子，并阅读了以前版本的Safari中的一个错误，但我的是最新的，并且还在Chrome上创建了问题。

以下是适用于所有浏览器的其他border-radius代码：

.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

Answer 1

首先，您在某些css规则的末尾缺少分号，因此根据它们的位置，这些分号可能会也可能不会起作用。例如，您的css溢出和不透明度规则缺少分号。其次，chrome支持无前缀的边界半径based on this fiddle I made。这意味着您不需要键入webkit前缀，因为它们只是在代码中浪费空间并使整个css文件大小膨胀。

Answer 2

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

边界半径结果不一致

2 个答案: