オペラのボーダー半径は、背景の角を隠していません

Question

in this jsfiddleのように、の上部にクラス.text_bgのボックスを作成しました。

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; 
}