Question

用图片描述这个问题最简单。它的外观（在Firefox中有效）：

在Chrome和Safari中，由于某种原因，边框的内部是正方形的：

这是我的CSS：

.header {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px 40px 40px 40px;
    border: 20px solid rgba(255,255,255,0.1);
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    margin-top: 20px;
}

有什么想法吗？

编辑 - 这是一个jfiddle：jsfiddle.net/oliverw92/pJgyu/11262 /

Answer 1

这是一个已知的Webkit和Opera错误：https://bugs.webkit.org/show_bug.cgi?id=23166

直到它被修复，你唯一的方法就是使用我害怕的2个元素......

Answer 2

如果从边框移除alpha，则可以正常工作。由于您可能不想这样做，因此您可以使用两个嵌套元素。 Example here

Answer 3

我认为剪切到框的填充时这是正常的Webkit行为。填充是方形的，即不是由边框曲线定义的，因此背景颜色覆盖边框的部分。

尝试这样做（通过嵌套在DIV中的SPAN）：

CSS: 
body {
    background-color: #999;   
}
.header {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px 40px 40px 40px;
    border: 20px solid rgba(255,255,255,0.1);  
    margin-top: 20px;
    height: 85px;
    font-weight: 100;
    font-size: 70px;
    vertical-align: middle;
    text-align: center;
}
.header span
{
    background-color: #F7F7F7;
    display: inline-block;
    width:100%;
    border-radius: 20px 20px;
}

HTML:
<div class="header">
    <span>DataLog</span>
</div>

附注：除了您的代码，我没有费心添加所有供应商前缀;我会留给你的。

Answer 4

或者你可以使用盒子阴影并调整上边距。我的示例仅包括-web-kit版本

.header {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7;
    -webkit-border-radius: 40px;
    -webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.10);
    margin-top: 40px;
    height: 85px;
     font-weight: 100;
    font-size: 70px;
    vertical-align: middle;
    text-align: center;
}

Here is a similar JSFiddle to your first example using only your original div

Answer 5

我遇到了类似的问题。事实证明，因为我使用border-radius添加的容器内的容器具有背景颜色，所以它覆盖了边框的内部。

为了纠正这个问题，我为子对象添加了一个border-radius，并使它看起来一样。

css3 border-radius - Chrome + Safari里面是正方形？

5 个答案: