border-radius渲染奇怪的在歌剧（罚款在chrome，firefox） [英] border-radius rendering strangely in opera (fine in chrome, firefox)
问题描述
我试图使用css为div创建一个圆角，折叠角错觉。
I'm trying to use css to create a rounded, folded corner illusion for a div.
我不知道为什么这个相当简单的html / css奇怪地在opera（v.12.10）中渲染，但在chrome和firefox看起来不错。当我应用一个border-radius到div，一个奇怪的陷阱出现在边框内，只在歌剧。请参阅上面的jsfiddle查看一个例子。
I cannot figure out why this fairly simple html/css renders strangely in opera (v.12.10) but looks fine in chrome and firefox. When I apply a border-radius to the div, a strange notch appears within the border, on opera only. Please see the jsfiddle above to see an example.
我想听听一个解决方案或至少解释在这种情况下发生了什么。 / p>
I'd love to hear a fix or at least an explanation as to what's going on with Opera in this case.
<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;
}
推荐答案
错误。因此，您可以手动修复它，将另一个div放在毛刺前面 http://jsfiddle.net/aN4XP/
It seems to be an opera bug. So you can fix it manually by putting another div in front of the glitch http://jsfiddle.net/aN4XP/
<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;
}
其他浏览器不应受此影响。
Other browsers should not be affected of this.
这篇关于border-radius渲染奇怪的在歌剧（罚款在chrome，firefox）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
