Як змусити закруглені кути CSS3 приховати переповнення в Chrome / Opera

Мені потрібні круглі кути на батьківському діві, щоб замаскувати вміст його дитини. overflow: hiddenпрацює в простих ситуаціях, але відбувається перерва у веб-браузерах на базі веб-програм і 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. Однак я ще не перевіряв Оперу чи Сафарі.

Я знайшов інше рішення цієї проблеми. Це схоже на чергову помилку в WebKit (або, можливо, в Chrome), але вона працює. Все, що вам потрібно зробити - це додати CSK-маску 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-індекс до елемента-радіуса кордону, і він замаскує речі всередині нього.

Не зважаючи на всіх, мені вдалося вирішити проблему, додавши додаткову діву між обгорткою та коробкою.

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; на обгортці вирішити помилку в веб-програмі

Здається, це працює:

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

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

Підтримуючи новітні версії хрому, опери та сафарі, ви можете це зробити:

-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/isissue/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/

заснований на чудовій відповіді Graycrow ...

Ось більш реальний приклад світу, який містить два конічні диски з деяким вмістом наповнювача. Я замінив жорстко закодований 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: absolut". Все, що вам потрібно зробити, - це змінити поле вліво і поле-право. 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;
        }
    }