Оперный бордюр-радиус не скрывает углов фона - PullRequest
Новая
       3

Оперный бордюр-радиус не скрывает углов фона

1 голос
/ 09 февраля 2012

Я создал коробку #text с классом .text_bg наверху, как вы можете видеть в этом jsfiddle .

В Firefox, Chrome и IE он отображается нормально, как вы можете видеть в этом jsfiddle, но в Opera закругленные углы поля не пересекают фон.

Как я могу это исправить? Подобные темы для этой проблемы предлагали background-clip и background-origin, но ни одна из них не работала для меня.

1 Ответ

1 голос
/ 09 февраля 2012

Я не понимаю, почему вы делаете это так, как вы, с дополнительным 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;
}
...