css3 border-radius - внутри есть квадрат на Chrome + Safari? - PullRequest
Новая
       13

css3 border-radius - внутри есть квадрат на Chrome + Safari?

1 голос
/ 05 июня 2011

Эту проблему проще всего описать картинками.Как это выглядит (работает в Firefox):

firefox

В Chrome и Safari внутренняя часть границы по какой-то причине квадратная:

хром

Вот мой CSS: 

.header {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px 40px 40px 40px;
    border: 20px solid rgba(255,255,255,0.1);
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    margin-top: 20px;
}

Любые идеи?

РЕДАКТИРОВАТЬ - вот jfiddle из этого: jsfiddle.net/ oliverw92 / pJgyu / 11262 /

Ответы [ 5 ]

2 голосов
/ 05 июня 2011

Это известная ошибка Webkit и Opera: https://bugs.webkit.org/show_bug.cgi?id=23166

Пока она не исправлена, я боюсь, что единственный способ обойти ее - использовать 2 элемента ...

1 голос
/ 05 июня 2011

Если вы удалите альфа с границы, это работает. Поскольку вы, вероятно, не хотите этого делать, вы можете использовать два вложенных элемента. Пример здесь .

0 голосов
/ 30 декабря 2014

У меня возникла похожая проблема.Оказалось, что поскольку контейнер внутри контейнера, который я добавил с помощью border-radius, имеет цвет фона, он покрывает внутреннюю часть границы.

Чтобы исправить это, я добавил border-radius для дочернего объекта, так как он заставляет его выглядеть одинаково.

0 голосов
/ 01 декабря 2012

Или вы можете просто использовать box-shadow и настроить верхнее поле.Мой пример включает только версии -web-kit 

.header {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7;
    -webkit-border-radius: 40px;
    -webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.10);
    margin-top: 40px;
    height: 85px;
     font-weight: 100;
    font-size: 70px;
    vertical-align: middle;
    text-align: center;
}

Вот пример JSFiddle, аналогичный вашему первому примеру, использующий только ваш оригинальный div

0 голосов
/ 05 июня 2011

Я думаю, что это нормальное поведение Webkit при обрезке до отступов поля. Заполнение является квадратным, то есть не определенным кривыми границы, и поэтому цвет фона перекрывает части границы.

Попробуйте вместо этого (через SPAN, вложенный в DIV): 

CSS: 
body {
    background-color: #999;   
}
.header {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px 40px 40px 40px;
    border: 20px solid rgba(255,255,255,0.1);  
    margin-top: 20px;
    height: 85px;
    font-weight: 100;
    font-size: 70px;
    vertical-align: middle;
    text-align: center;
}
.header span
{
    background-color: #F7F7F7;
    display: inline-block;
    width:100%;
    border-radius: 20px 20px;
}

HTML:
<div class="header">
    <span>DataLog</span>
</div>

Примечание: кроме вашего кода, я не стал добавлять все префиксы поставщиков; Я оставлю это тебе.

...