Jak zrobić CSS3 zaokrąglone rogi ukryć przepełnienie w Chrome / Opera

Znalazłem inne rozwiązanie tego problemu. Wygląda to na kolejny błąd w WebKit( lub prawdopodobnie Chrome), ale działa. Wszystko, co musisz zrobić-to dodać WebKit CSS Mask do elementu #wrapper. Możesz użyć pojedynczego piksela png, a nawet dołączyć go do CSS, aby zapisać żądanie 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;
}​

Przykład JSFiddle

Dodaj indeks z do elementu border-radius ' D, A to zamaskuje rzeczy wewnątrz niego.

Nieprzezroczystość: 0.99; na wrapperze rozwiąż błąd webkit

Wygląda na to, że ten działa:

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

Http://jsfiddle.net/qWdf6/82/

Brak odpowiedzi, ale jest to błąd w źródle Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

Niestety, wygląda na to, że nikt nad tym nie pracuje. :(

Obsługiwane w najnowszych przeglądarkach chrome, opera i safari, możesz to zrobić:

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

Zdecydowanie powinieneś sprawdzić narzędzie http://bennettfeely.com/clippy/!

Zmień krycie elementu nadrzędnego z obramowaniem, a to spowoduje ponowne uporządkowanie ułożonych elementów. To zadziałało cudownie dla mnie po godzinach badań i nieudanych próbach. To było tak proste, jak dodanie krycia 0.99, aby ponownie zorganizować ten proces malowania przeglądarek. Sprawdź http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Bazując na doskonałej odpowiedzi graycrowa...

Oto bardziej realny przykład świata, który ma dwa cicular divs z pewną zawartością wypełniacza. Zastąpiłem mocno zakodowane tło png tylko wartością szesnastkową, tzn.

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

Zastępuje się

-webkit-mask-image:#fff;

Jak dla mnie żadne z rozwiązań nie działało dobrze, tylko przy użyciu:

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

Na opakowaniu element wykonał zadanie.

Oto przykład: http://jsfiddle.net/gpawlik/qWdf6/74/

Zobacz jak to zrobiłem; Jsfiddle

Z kodem, który wstawiłem, udało mi się uruchomić go na Webkit (Chrome/Safari) i Firefox. Nie wiem czy działa z najnowszą wersją Opery. tak, działa pod najnowszą wersją Opery.

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

Jeśli chcesz utworzyć maskę dla obrazu i umieścić obraz wewnątrz kontenera, nie ustawiaj atrybutu 'position: absolute'. Wszystko, co musisz zrobić, to zmienić margines-lewy i margines-prawy. Chrome / Opera będzie stosować się do reguł overflow: hidden i border-radius.

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