CSS3 yuvarlak görüntü köşeleri Safari/Chrome'da çalışmıyor mu?

Bu web sitesinde, Firefox ve Internet Explorer 9'da test ederek, Safari ve Chrome'un CSS3'ümüzü sunacaklarını öğrendim. FF ve IE9 iseCSS3 yuvarlak görüntü köşeleri Safari/Chrome'da çalışmıyor mu?

Bunu görmek:

enter image description here

Safari/Chrome'da bu bakın:

<div class="container"> 
    <div> 
     <img src="static/images/image1.jpg" alt="" /> 
    </div>

aşağıda açıklanmıştır:

İşte enter image description here

HTML bulunuyor CSS:

.container { 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius: 10px; 
    }

Neyi yanlış yapıyorum? :(

GÜNCELLEME
yaşıyorum sorunun bir çalışma örnek bakın:.. http://jsfiddle.net/jAsnU/3 Teşekkür

kaynak

2011-05-25 Chuck Le Butt

deneyin:

.container img { 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius: 10px; 
}

kaynak

2011-05-25 19:59:18 ohmusama

Bunun neden işlediğini ve Webkit tarayıcılarının taşmayı neden gizlemediğini açıklamayı çok isterim, ancak bu yanıttı. Teşekkürler! –

Son zamanlarda aynı problemi yaşadım. Ve bu benim için çalışan tek çözümdü. Neden işe yaradı? Bunu kabul ediyorum çünkü webkit aslında altta yatan ana unsurları çocuklara yuvarlama yapmıyor. Çocuk div'unuz varsa, aynı zamanda yuvarlaklığa da ihtiyaç duyabilir. Bu deneyi yapabilir ve bunu kendine kanıtlayabilirsin. – ohmusama

Sana, Yani böyle bir şey bir border

belirtmek gerekir düşünüyorum:

border:1px solid blue; // ne olursa olsun mavi kullandığınız.

görünüyor FF olsa ve ben E size yuvarlak kenarlık veriyor ... ama görüntüyü kesen boş bir parça olarak.

kaynak

2011-05-25 19:51:52

deneyin ekleyerek "taşma: hidden;" div stiline. Jsfiddle'da hızlı bir test sayfası yaptım ve işe yaramış görünüyordu (Chrome, Safari ve FireFox'ta test edilmiş): http://jsfiddle.net/wabw8/

kaynak

2011-05-25 19:59:19 patorjk

JS Fiddle'ınız iyi çalışıyor olsa da, projemde denediğimde işe yaramıyor. Çok sinir bozucu! Görüntülerin aslında daha sonra javascript ile bir atlı karıncaya (http://slidesjs.com/) olarak eklendiği gerçeği ile ilgili bir şey olması gerektiğini düşünüyorum. –

Bu sayfada sınır yarıçapının nerede uygulandığını göremiyorum (henüz üretime geçmediyseniz). – patorjk

Burada. Şimdi görebiliyorum: http://jsfiddle.net/jAsnU/3/ –

Sınır yarıçapını .container div img.

kaynak

2011-05-25 19:59:36 Dan

+1 Teşekkürler. Cevabın işe yaradı, ama ohmusama daha iyisini verdi. –

Evet, 4 kişi bir dakika içinde bu soruya bir cevap gönderdi! haha – Dan

CSS3 yuvarlak görüntü köşeleri Safari/Chrome'da çalışmıyor mu?

cevap

İlgili konular