Opera 边框半径不隐藏背景的角落

Question

我创建了一个框 #text，其顶部有一个类 .text_bg，如您所见 在此 jsfiddle 中。

在 Firefox、Chrome 和 IE 中，它显示得很好，正如您在 jsfiddle 中看到的那样，但在 Opera 中，框的圆角不会剪切背景。

我该如何解决这个问题？ 这个问题的类似主题建议背景剪辑和背景起源，但似乎都不适合我。

Answer 1

我不明白你为什么要这样做，用额外的 div 。只需将背景设置为repeat-x，与div 顶部对齐即可。我无法保存到 jsfiddle 来向您展示示例，所以这里是更新的代码。

更新了 HTML：

<div id="text" class="text_bg">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div>

更新了 CSS：

#text {
    float: left;
    height: auto;
    width: 328px;
    margin-top: 110px;
    background-color: rgba(40,40,40,0.7);
    padding: 20px;
    padding-top:0px;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin-left: 110px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    border: 5px solid rgba(255,255,255,1.0);    
    overflow:hidden;
}    

.text_bg {
    background: -webkit-linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background: -moz-linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background: -ms-linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background: -o-linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background: linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczOTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMwMDY2Q0MiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDk5RkYiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czOTEpIiAvPgo8L3N2Zz4=);
    background-size: auto 54px;
    background-repeat:repeat-x;
    background-position:top;
    height: 54px;
    width: 120%;
    margin-left:-10%;
    clear: both;
    margin-bottom:-25px;
    border-radius:8px;
}