Как заставить CSS3 закругленные углы скрыть переполнение в Chrome / Opera - PullRequest
Новая
       30

Как заставить CSS3 закругленные углы скрыть переполнение в Chrome / Opera

145 голосов
/ 21 апреля 2011

Мне нужно закруглить углы родительского элемента div, чтобы замаскировать содержимое из его дочерних элементов.overflow: hidden работает в простых ситуациях, но ломается в браузерах на основе webkit и в Opera, когда родитель позиционируется относительно или абсолютно.

Это работает в Firefox и IE9:

CSS 

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

HTML 

<div id="wrapper">
  <div id="box"></div>
</div>

Пример на JSFiddle

Спасибо за помощь!

ОБНОВЛЕНИЕ: Ошибкапричина этой проблемы была исправлена ​​в Chrome.Однако я не перепроверял Opera или Safari.

Ответы [ 12 ]

1 голос
/ 21 апреля 2011

Вот посмотрите, как я это сделал; Jsfiddle

С помощью введенного мной кода мне удалось заставить его работать на Webkit (Chrome / Safari) и Firefox. Я не знаю, работает ли он с последней версией Opera. Да, он работает под последней версией Opera. 

#wrapper {
  width: 300px; height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}
0 голосов
/ 09 марта 2016

Если вы хотите создать маску для изображения и расположить изображение внутри контейнера, не устанавливайте атрибут 'position: absolute'.Все, что вам нужно сделать, это изменить поля слева и поля справа.Chrome / Opera будет придерживаться правил переполнения: скрытый и радиус границы. 

// Breaks in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            position: absolute;
            left: 20px;
            right: 20px;
        }
    }

// Works in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            margin-left: 20px;
            margin-right: 20px;
        }
    }
Страница:
...