Ebeveyn div üzerinde sınır yarıçapı ayarlı görüntü köşelerinin kırpılması Safari'de çalışmaz

Question

Bir divun içine yerleştirilmiş bir resmim var; div köşeleri yuvarlatılmış ve görüntü köşelerini gizleyen bir maske olarak çalışır ve onu daire olarak görüntüler. . Safari hariç tüm tarayıcılarda çalışır! kimse bunu nasıl düzelteceğini biliyor mu?

-webkit-padding-box, -webkit-mask-box-image'ü denedim, ancak ikisi de işe yaramadı.

HTML:

<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div> 

CSS:

.cat{ 
    width: 128px; 
    height: 128px; 
    margin: 20px 96px 0px 96px; 
    position: relative; 
    float: left; 
    border-radius: 50%; 
    overflow: hidden; 
    border-top: 1px solid #111; 
    border-bottom: 1px solid #fff; 
    background: #fff; 
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); 
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); 
} 

.cat img{ 
    position: absolute; 
    border: none; 
    width: 138px; 
    height: 138px; 
    top: -8px; 
    left: -8px; 
    cursor: pointer; 
} 

fiddle

Answer 1

Ne Safari sürüm ile çalışır? Bu sorun için

Çeşitli (yetersiz) açıklamalar: How to make CSS3 rounded corners hide overflow in Chrome/Opera

Sen position:absolute; ile içerik akışının <img /> dışarı atılmaktadır. Bunu yaparak, görüntü özelliğini de engellemek için değiştirmelisiniz. Daha sonra img'da sınır yarıçapı koymak mantıklıdır.

http://jsfiddle.net/Volker_E/LgYrz/
Not bakınız: çok eski Webkits Açık (Safari < 5.0) bu sorunu -webkit-border-radius is necessary

Answer 2

iyi yolu, ana elemana overflow: hidden; belirterek gereğidir.

Answer 3

Diğer bir basit çözüm de border-radius özelliğini img etiketine eklemek ve aynı değeri vermek.

BTW daha ben hala eski Firefox'ta çift border-radius geçici çözümü gerekli yaptılar süre ama son kez tarayıcılar bir çift daha bunu test etmedim -I resimler içeren HTML5 figure etiketi kullanabilirsiniz.