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

Мне нужно закруглить углы родительского элемента 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.

Я нашел другое решение этой проблемы. Это похоже на еще одну ошибку в WebKit (или, возможно, Chrome), но это работает. Все, что вам нужно сделать - это добавить CSS-маску WebKit к элементу #wrapper. Вы можете использовать однопиксельное изображение PNG и даже включить его в CSS, чтобы сохранить HTTP-запрос.

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

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

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

Пример JSFiddle

Добавьте z-index к элементу border-radius, и он замаскирует вещи внутри него.

Не смотря ни на что, мне удалось решить проблему, добавив дополнительный div между оболочкой и коробкой.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

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

HTML

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

Спасибо всем, кто помог!

→ http://jsfiddle.net/5fwjp/

непрозрачность: 0,99; на обертке решить баг webkit

Кажется, это работает:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Поддерживается в последних Chrome, Opera и Safari, вы можете сделать это:

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

Вы обязательно должны проверить инструмент http://bennettfeely.com/clippy/ !

Не ответ, но это ошибка в источнике Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

К сожалению, не похоже, что кто-то работает над этим. :(

измените непрозрачность родительского элемента с рамкой, и это позволит организовать упорядоченные элементы. Это чудесно сработало для меня после нескольких часов исследований и неудачных попыток. Это было так же просто, как добавить непрозрачность 0,99, чтобы реорганизовать этот процесс рисования в браузерах. Проверьте http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

На мой взгляд, ни одно из решений не сработало, только с использованием:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

на элемент обертки сделал свою работу.

Вот пример: http://jsfiddle.net/gpawlik/qWdf6/74/

основанный на превосходном ответе серой вороны ...

Вот более реальный пример, в котором есть два специальных элемента с некоторым содержанием наполнителя. Я заменил жестко запрограммированный фон png на шестнадцатеричное значение, т.е.

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

заменяется на

-webkit-mask-image:#fff;

Смотрите это JSFiddle ... http://jsfiddle.net/hqLkA/

Вот посмотрите, как я это сделал; 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;
}

Я попробовал каждый ответ, но безуспешно. После нескольких часов исследований я нашел решение этой проблемы. Использование этих свойств в вашем классе не позволит элементам div переполнять контейнер.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Если вы хотите создать маску для изображения и расположить изображение внутри контейнера, не устанавливайте атрибут '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;
        }
    }