歌剧边界半径不隐藏背景的角落答案

【问题标题】：Opera border-radius not hiding corners of background歌剧边界半径不隐藏背景的角落
【发布时间】：2012-02-09 11:23:56
【问题描述】：

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

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

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

【问题讨论】：

标签： background opera css

【解决方案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;
}

【讨论】：

澄清一下：Opera 实现了没有前缀的border-radius，所以-o-border-radius 不是必需的。
谢谢，现在食角的问题已经解决了:)。但是现在有一个不同的问题：每当我向下滚动我的网站时，该文本框中的背景似乎不是固定在文本框而是固定在其他地方，因此它不会随着文本框上下滚动。这只发生在 Opera 中。
有完整页面的链接以便我们看到吗？
我终于通过在 CSS 规则的第一位（在 -o-linear-gradient而不是将它放在 -o-linear-gradient 后面）。