Cara membuat sudut bulat CSS3 menyembunyikan overflow di Chrome / Opera

Saya perlu sudut bulat di div induk untuk menutupi konten dari masa kanak-kanaknya. overflow: hiddenberfungsi dalam situasi sederhana, tetapi istirahat di browser berbasis webkit dan Opera ketika orang tua diposisikan relatif atau mutlak.

Ini berfungsi di Firefox dan 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>

Contoh di JSFiddle

Terima kasih untuk bantuannya!

PEMBARUAN: Bug yang menyebabkan masalah ini telah diperbaiki di Chrome. Saya belum menguji ulang Opera atau Safari.

Saya menemukan solusi lain untuk masalah ini. Ini terlihat seperti bug lain di WebKit (atau mungkin Chrome), tetapi berhasil. Yang perlu Anda lakukan - adalah menambahkan Masker CSS WebKit ke elemen #wrapper. Anda dapat menggunakan gambar png piksel tunggal dan bahkan memasukkannya ke CSS untuk menyimpan permintaan 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;
}​

Contoh JSFiddle

Tambahkan z-indeks ke item berbatasan-jari Anda, dan itu akan menutupi hal-hal di dalamnya.

Bagaimanapun, saya berhasil menyelesaikan masalah dengan menambahkan div tambahan antara pembungkus dan kotak.

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>

Terima kasih semuanya yang telah membantu!

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

opacity: 0,99; pada bungkus menyelesaikan bug webkit

Tampaknya ini bekerja:

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

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

Didukung dalam chrome, opera dan safari terbaru, Anda dapat melakukan ini:

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

Anda pasti harus memeriksa alat http://bennettfeely.com/clippy/ !

Bukan jawaban, tetapi ini adalah bug yang diajukan di bawah sumber Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

Sayangnya, sepertinya tidak ada orang yang mengerjakannya. :(

ubah opacity dari elemen induk dengan perbatasan dan ini akan mengatur ulang elemen yang ditumpuk. Ini bekerja secara ajaib bagi saya setelah jam penelitian dan upaya gagal. Itu sesederhana menambahkan opacity 0,99 untuk mengatur ulang proses pengecatan browser ini. Lihat http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Bagi saya tidak ada solusi yang bekerja dengan baik, hanya menggunakan:

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

pada elemen pembungkus melakukan pekerjaan.

Berikut ini contohnya: http://jsfiddle.net/gpawlik/qWdf6/74/

berdasarkan jawaban Graycrow yang sangat baik ...

Berikut adalah contoh dunia nyata yang memiliki dua div cicular dengan beberapa konten pengisi. Saya mengganti latar belakang png hard-coded hanya dengan nilai hex, yaitu

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

diganti dengan

-webkit-mask-image:#fff;

Lihat JSFiddle ini ... http://jsfiddle.net/hqLkA/

Di sini, lihat bagaimana saya melakukannya; Jsfiddle

Dengan Kode yang saya masukkan, saya berhasil membuatnya bekerja di Webkit (Chrome / Safari) dan Firefox. Saya tidak tahu apakah itu berfungsi dengan Opera versi terbaru. Ya itu berfungsi di bawah versi terbaru 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;
}

Saya mencoba setiap jawaban tetapi tidak berhasil. Setelah beberapa jam menyelidiki saya menemukan solusi untuk masalah ini. Menggunakan properti ini di kelas Anda tidak akan memungkinkan elemen div meluap wadah.

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

Jika Anda mencari untuk membuat topeng untuk gambar dan posisi gambar di dalam wadah tidak mengatur atribut 'position: absolute'. Yang harus Anda lakukan adalah mengubah margin-kiri dan margin-kanan. Chrome / Opera akan mematuhi aturan overflow: tersembunyi dan radius batas.

// 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;
        }
    }