歌劇邊界半徑不隱藏背景的角落

Question

我創建了一個框#text與.text_bg在其頂部，你可以看到in this jsfiddle。

在Firefox，Chrome和IE中，它顯示得很好，就像你在jsfiddle中看到的一樣，但是在Opera中，框的圓角不會裁剪背景。

我該如何解決這個問題？ 這個問題的類似主題建議背景剪輯和背景源，但似乎都不適合我。

Answer 1

我不明白你爲什麼要這樣做，與額外的股利。只需將背景設置爲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; 
}