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

Question

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

Answer 1

Я нашел другое решение этой проблемы. Это похоже на еще одну ошибку в WebKit (или, возможно, Chrome), но это работает. Все, что вам нужно сделать - это добавить WebKit CSS Mask к элементу #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

Answer 2

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

Answer 3

Не бери в голову, мне удалось решить проблему, добавив дополнительный 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/

Answer 4

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

Answer 5

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

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

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

Answer 6

Поддерживается в последних версиях 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/!

Answer 7

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

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

Answer 8

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

Answer 9

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

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

на элементе оболочки было выполнено задание.

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

Answer 10

на основе превосходного ответа Graycrow ...

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

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

заменено на

-webkit-mask-image:#fff;

См. Этот JSFiddle ... http://jsfiddle.net/hqLkA/