Граница содержимого с закругленными углами - PullRequest
Новая
       15

Граница содержимого с закругленными углами

0 голосов
/ 12 апреля 2010

Я использую закругленные углы CSS для Firefox, и у меня есть следующая проблема с границами содержимого:

код 

<html>
<head>
   <style>
      #outter {
            width: 200px;
            margin: auto;
            text-align: center;
            border: 1px solid #333;
            -moz-border-radius: 15px;
        }
        #inner {
            background: red;
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div id="outter">
    <div id="inner">text</div>
</div>
</body>
</html>

Эффект

альтернативный текст http://img256.imageshack.us/img256/2108/testew.png

Я могу избежать этой проблемы, определив -moz-border-radius для каждого ребенка ауттера. Есть какой-то другой способ, которым я скучаю?

Редактировать

Более сложный тест с несколькими внутренними делителями с разными background-color для каждого: 

<div id="outter">
    <div id="inner1" style="background: blue">text</div>
    <div id="inner2" style="background: gray">text</div>
    ...
    <div id="innerN" style="background: yellow">text</div>
</div>

Ответы [ 2 ]

3 голосов
/ 12 апреля 2010

Вы также можете сделать это: 

  #outter {
        width: 200px;
        margin: auto;
        text-align: center;
        border: 1px solid #333;
        -moz-border-radius: 15px;
        background: red;
    }
    #inner {
        opacity: 0.5;
    }

Перемещение фона к округленному родительскому элементу будет отображаться правильно, см. Пример: http://jsfiddle.net/mE8En/ (работает только в Firefox!), Добавьте радиус границы веб-набора, если вы хотите поддерживать другие браузеры, основанные на . а также вот так: 

-moz-border-radius: 15px; 
-webkit-border-radius: 15px;

Обновление для редактирования: Чтобы обработать внутренние элементы div в Firefox, вычтите пиксель на внутреннем элементе div, чтобы компенсировать границу, в результате чего получается: 

#outter {
    width: 200px;
    margin: auto;
    text-align: center;
    border: 1px solid #333;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: red;
}
#outter > div:first-child {
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
     -webkit-border-top-left-radius: 14px;
     -webkit-border-top-right-radius: 14px;
}
#outter > div:last-child {
    -moz-border-radius-bottomleft: 14px;
    -moz-border-radius-bottomright: 14px;
     -webkit-border-bottom-left-radius: 14px;
     -webkit-border-bottom-right-radius: 14px;
}
#inner {
    opacity: 0.5;
}
​

Примечание: радиусы не идеальны для внутренних делителей в webkit, отрегулируйте их по желанию ... это потому, что рендеринг не идеален для пикселей в браузерах.

1 голос
/ 12 апреля 2010

Кроме того, если вы хотите, чтобы эти закругленные углы в IE без изображений, проверьте DDRoundies .

...