Chrome / Opera'da CSS3 yuvarlak köşeleri taşmayı nasıl gizler

Çocukluğundan içeriği maskelemek için bir üst div üzerinde yuvarlak köşelere ihtiyacım var. overflow: hiddenbasit durumlarda çalışır, ancak ebeveyn nispeten veya kesinlikle konumlandırıldığında webkit tabanlı tarayıcılarda ve Opera'da kırılır.

Firefox ve IE9'da çalışır:

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 örneği

Yardım için teşekkürler!

GÜNCELLEME: Bu soruna neden olan hata Chrome'da düzeltildi. Ancak Opera veya Safari'yi tekrar test etmedim.

Bu sorun için başka bir çözüm buldum. Bu WebKit'te (veya muhtemelen Chrome'da) başka bir hataya benziyor, ancak çalışıyor. Tek yapmanız gereken #wrapper öğesine bir WebKit CSS Maskesi eklemektir. Tek bir piksel png resmi kullanabilir ve hatta bir HTTP isteğini kaydetmek için CSS'ye ekleyebilirsiniz.

#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 Örneği

Kenar yarıçaplı öğenize bir z-endeksi ekleyin, içindeki öğeleri maskeleyecektir.

Herkese boşver, sorunu paketleyici ve kutu arasına ek bir div ekleyerek çözmeyi başardım.

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>

Yardım eden herkese teşekkürler!

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

opaklık: 0.99; sarıcı üzerinde webkit hata çözmek

Bu işe yarıyor gibi görünüyor:

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

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

En son krom, opera ve safari'de desteklenir, bunu yapabilirsiniz:

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

Kesinlikle http://bennettfeely.com/clippy/ aracını kontrol etmelisiniz !

Yanıt değil, ancak Chromium kaynağı altında dosyalanmış bir hata: http://code.google.com/p/chromium/issues/detail?id=62363

Ne yazık ki, üzerinde çalışan kimse yok gibi görünüyor. :(

üst öğenin opaklığını kenarlıkla değiştirdiğinizde yığılmış öğeler yeniden düzenlenir. Saatlerce süren araştırma ve başarısız denemelerin ardından bu benim için mucizevi bir şekilde çalıştı. Tarayıcıların bu boya sürecini yeniden düzenlemek için 0,99 opaklık eklemek kadar basitti. Check out http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Bana gelince, çözümlerin hiçbiri sadece işe yaramadı:

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

sarıcı eleman üzerinde iş yaptı.

İşte örnek: http://jsfiddle.net/gpawlik/qWdf6/74/

graycrow'un mükemmel cevabına dayanarak ...

İşte bazı dolgu içeriği olan iki cicular div içeren daha gerçek bir dünya örneği. Sabit kodlu png arka planını yalnızca onaltılık bir değerle değiştirdim, yani

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

ile değiştirildi

-webkit-mask-image:#fff;

Bu JSFiddle'a bakın ... http://jsfiddle.net/hqLkA/

İşte nasıl yaptığımı görün; Jsfiddle

Girdiğim Kod ile Webkit (Chrome / Safari) ve Firefox üzerinde çalışmayı başardım. Opera'nın en son sürümüyle çalışıp çalışmadığını bilmiyorum. Evet, Opera'nın en son sürümü altında çalışır.

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

Her cevabı denedim ama başarılı olamadım. Birkaç saat araştırdıktan sonra bu soruna bir çözüm buldum. Sınıfınızda bu özelliklerin kullanılması div öğelerinin kaptan taşmasına izin vermez.

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

Bir görüntü için maske oluşturmak ve görüntüyü kabın içine konumlandırmak istiyorsanız 'position: absolute' niteliğini ayarlamayın. Tek yapmanız gereken kenar boşluğunu ve sağ kenarını değiştirmek. Chrome / Opera taşma kurallarına uyacak: gizli ve sınır yarıçapı kuralları.

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