我正在尝试使用 css 为 div 创建圆 Angular 折叠 Angular 错觉。
我不明白为什么这个相当简单的 html/css 在 Opera (v.12.10) 中渲染得很奇怪，但在 chrome 和 firefox 中看起来很好。当我对 div 应用边框半径时，边框内会出现一个奇怪的缺口，仅适用于 Opera。请参阅上面的 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;
}
最佳答案
这似乎是歌剧错误。因此，您可以通过在故障之前放置另一个 div 来手动修复它 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;
}
其他浏览器不应受到此影响。
关于html - 边框半径在 Opera 中渲染得很奇怪(在 chrome、firefox 中很好)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13304688/