css3 border-radius - 里面是Chrome + Safari上的正方形？ [英] css3 border-radius - inside is square on Chrome + Safari?

问题描述

这是最容易用图片描述这个问题。它是如何看起来（在Firefox中工作）：

It is easiest to describe this problem with pictures. How it is meant to look (works in Firefox):

firefox

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

In Chrome and Safari the insides of the border are square for some reason:

chrome

这是我的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;
}

有什么想法吗？

EDIT - here is a jfiddle of it：jsfiddle.net/oliverw92/pJgyu/11262 /

EDIT - here is a jfiddle of it: jsfiddle.net/oliverw92/pJgyu/11262/

推荐答案

阿尔法从边界，它的工作。因为你可能不想这样做，你可以使用两个嵌套的元素。 这里的示例。

If you remove the alpha from the border, it works. Since you probably don't want to do that, you may be able to use two nested elements. Example here.

这篇关于css3 border-radius - 里面是Chrome + Safari上的正方形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！