CSS Il raggio del bordo non taglia immagine su Webkit

Question

Non riesco a capire perché border-radius è scomparso dal mio elemento #screen quando si utilizza chrome ma non firefox o ie9?

ho tutti i diversi prefissi per ogni browser, più lo standard border-radius:

www.cenquizqui.com

La casella di contenuti superiore che contiene le immagini, chiamato #screen

un copia incolla di css dello schermo:

#screen {background: none repeat scroll 0 0 #EEEEEE; 
    display: block; 
    height: 300px; 
    position: relative; 
    width: 960px; 
    overflow:hidden; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius:10px;} 

Forse perché Chrome non gestisce il 'taglio' delle immagini in modo corretto? Ho pensato che fosse solo un problema quando avevi i tag effettivi all'interno del contenitore dell'angolo arrotondato, non quando l'img è chiamato come background-image attraverso css.

saluti G.Campos

Answer 1

Webkit non è in grado di gestire il ritaglio di margini per bambini e nipoti +. È solo così male. Se si desidera il ritaglio dei bordi, deve essere direttamente sul div l'immagine viene posizionata senza scendere più in basso nella gerarchia.

Answer 2

Sembra che è necessario applicare il raggio confine con l'elemento li:

#slides li { 
display: block; 
float: left; 
height: 300px; 
width: 960px; 
position: relative; 
border-radius: 10px; 
} 

Answer 3

Lo fa molto avere un raggio di confine:

(Ho appena aggiunto un bordo con la barra degli strumenti di sviluppo di Chrome.)

Il raggio del bordo non limita il suo contenuto all'interno dell'area risultante — lo spazio al di fuori degli angoli è ancora occupabile dal contenuto dell'elemento.

La mia raccomandazione sarebbe quella di sovrapporre un'immagine che ha gli angoli tagliati in quel modo (e quindi utilizzare una mappa o qualsiasi cosa con cui ci si sente a proprio agio per abilitare ancora le frecce sinistra/destra).

Answer 4

provare il seguente CSS agli elementi secondari dell'elemento con border-radius serie: opacity:0.99; risolve il problema e non cambia l'opacità molto. Questo ha funzionato perfettamente per me.

Answer 5

Ecco una soluzione che risolverà il bug Chrome corrente:

.element-that-holds-pictures { 
    perspective: 1px; /* any non-zero value will work */ 
} 

Ciò non influirà la visualizzazione a tutti (a differenza del opacity:0.99 soluzione - che è grande soluzione, anche, tra l'altro).

Answer 6

C'è una soluzione molto più semplice.

Basta aggiungere overflow:hidden al contenitore che ha il raggio di confine e contiene gli elementi figlio. Questo impedisce ai bambini di "fluire" sul contenitore. Risolve il problema e mostra il raggio del bordo