Question

我正在尝试使用css为div创建一个圆角，折叠的角落错觉。

我无法弄清楚为什么这个相当简单的html / css在opera（v.12.10）中呈现奇怪但在chrome和firefox中看起来很好。当我将边界半径应用于div时，边框内出现一个奇怪的缺口，仅限于歌剧。请参阅上面的jsfiddle以查看示例。

在这种情况下，我很想听听修正或至少解释Opera的情况。

<body>
    <div class="example"></div>
</body>



body 
{
   background-color: gray;
   padding: 50px;        
}

div.example
{
    border-bottom-left-radius: 10px;
    border-color: transparent transparent white white;
    border-style: solid;
    border-width: 30px;
    display: block;
    width: 0;
    height: 0;   
}

Answer 1

这似乎是一个歌剧虫。因此，您可以通过在毛刺http://jsfiddle.net/aN4XP/

前面放置另一个div来手动修复它

<div class="example">
    <div class="operaFix"></div>
</div>

这里有额外的css：

div.operaFix
{
    border-bottom-left-radius: 10px; 
    border-color: white;
    border-style: solid;
    border-width:10px;
    display:block;
    margin-left:-30px;
    margin-top:10px;
    width: 0;
    height: 0;   
}

其他浏览器不应受此影响。

在opera中奇怪地使用border-radius渲染（在chrome，firefox中很好）

1 个答案: