CSS Radio de borde que no recorta la imagen en Webkit

Tengo problemas para averiguar por qué border-radius se ha ido de mi elemento #screen al usar chrome pero no en firefox o ie9?CSS Radio de borde que no recorta la imagen en Webkit

tengo todos los diferentes prefijos para cada navegador más el estándar de la frontera de radio:

www.cenquizqui.com

El cuadro de contenido superior que contiene las imágenes, llamado #screen

una copiar y pegar de css de pantalla:

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

¿es porque el cromo no maneja el 'recorte' de las imágenes correctamente? Pensé que era solo un problema cuando tenía las etiquetas reales dentro del contenedor de esquina redondeada, no cuando se llama el img como imagen de fondo a través de css.

Saludos G.Campos

Fuente

2012-01-02 Sotkra

No funciona en Opera también. – c69

Webkit no puede manejar el recorte del radio de borde para niños y nietos +. Es así de malo. Si desea recortar bordes, tiene que estar directamente en el div en el que se coloca la imagen sin profundizar en la jerarquía.

Fuente

2012-01-12 16:57:53 Sotkra

no pudo encontrar ninguna documentación con respecto a este error o error - si alguien lo hace, por favor dígale – Sotkra

http://stackoverflow.com/questions/5736503/how-to- make-css3-rounded-corners-hide-overflow-in-chrome-opera –

Parece que es necesario aplicar el radio de frontera para el elemento li:

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

Fuente

2012-01-02 21:03:45 justinlabenne

Eso va a dar un efecto muy poco atractivo. – AlienWebguy

para mí y para usted, sí, solo estoy tratando de ayudar a rastrear dónde Sotkra puede buscar cambios. – justinlabenne

bueno, sí, puedo aplicarlo al elemento li, pero luego, a medida que las diapositivas se pasen, las 'esquinas' entre las diapositivas no serán perfectas. En última instancia, la pregunta aquí es, ¿por qué sucede esto en cromo, pero no ff o ie9? – Sotkra

mucho tiene un radio de frontera:

enter image description here

(Acabo de agregar un borde con la barra de herramientas de desarrollo de Chrome.)

El radio del borde no restringe su contenido dentro del área resultante — el espacio fuera de las esquinas todavía se puede ocupar por el contenido del elemento.

Mi recomendación sería superponer una imagen que tenía las esquinas recortadas así (y luego usar un mapa o lo que sea que se sienta cómodo para activar aún las flechas izquierda/derecha).

Fuente

2012-01-02 21:10:22 Purag

Sí, lo sé, pero ... ¿es esto una "cosa" solo de Chrome porque Firefox parece tratar con eso muy bien. Demonios, incluso el navegador más travieso vivo, ie9, lo maneja bien. Me pregunto si esto se puede solucionar con algún tipo de propiedad de clip de fondo ... – Sotkra

También me preguntaba si el posicionamiento absoluto y el índice z estaban arruinando el recorte a través del radio del borde. Eliminé ambos y el error persiste. – Sotkra

@Sotkra, No, esto también ocurre en Safari y Opera. Parece que Firefox e IE son los que lo hicieron bien. Y debería echarle un vistazo a IE9/10, ya que su motor Javascript es el más rápido y con mayor capacidad de respuesta de todos los navegadores. IE realmente ha limpiado un montón de cosas y muchos de los grandes errores con los que me encuentro ahora son problemas de webkit. – Aaron

Prueba el siguiente CSS a los elementos secundarios del elemento con el conjunto de la frontera de radio: opacity:0.99; que resuelve el problema y no cambia mucho la opacidad. Esto funcionó perfectamente para mí.

Fuente

2014-11-22 06:10:05

He aquí una solución que va a arreglar el error de cromo actual:

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

Esto no afectará a la pantalla del todo (a diferencia de la solución opacity:0.99 - que es una gran solución, también, por cierto).

Fuente

2015-01-14 00:09:37 Adam

¡Señor, me salvó el día! – phoenixwizard

Guau, funcionó como un encanto. ¡Gracias! – Andrienko

Esto debe ser la respuesta aceptada para Chrome Browser – ntgCleaner

Hay una solución mucho más simple.

Simplemente agregue overflow:hidden al contenedor que tiene el radio del borde y contiene los elementos secundarios. Esto evita que los niños "fluyan" sobre el contenedor. De esta forma se soluciona el problema y se muestra el radio del borde

Fuente

2015-08-25 12:59:36 DutchKevv

CSS Radio de borde que no recorta la imagen en Webkit

Respuesta

Cuestiones relacionadas