2

http://jsfiddle.net/eE4Y2/2/

我正在尝试使用 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;   
}
4

1 回答 1

2

这似乎是一个歌剧错误。因此，您可以通过在故障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;   
}

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

于 2012-11-09T09:14:15.070 回答