border-radius falla en safari (recorte feo)

¿Alguien sabe una solución para el siguiente 'error' en Safari?border-radius falla en safari (recorte feo)

Cuando uso border-radius para crear bordes redondeados en CSS3 simplemente funciona bien en Safari, FF, etc.

Pero cuando el color del borde es del mismo color que en el fondo, puede ver el fondo de los contenedores superpuestos al borde.

Puedes probarlo aquí: http://de.roundedcorner.org/css3-rounded-corner-generator acaba de establecer la frontera-color y los sitios de fondo para #333333

Gracias por su ayuda!

Fuente

2011-03-06 Gundon

Eso es más probable debido a recorte de fondo.

La siguiente debería corregir eso.

-moz-background-clip: padding; 
-webkit-background-clip: padding-box; 
background-clip: padding-box;

Para algunos más en el fondo-clip, echar un vistazo aquí: https://developer.mozilla.org/en/CSS/background-clip

Fuente

2011-03-06 16:32:49

Como nota adicional, me gustaría agregar que el uso de esta opción de recorte puede causar un problema similar dentro del elemento, entre el borde y el fondo. ¡Divertido! :) –

También estoy teniendo un problema de recorte de esquina redondeada, no estoy seguro si cae bajo el mismo mandato, pero el recorte de fondo no lo está arreglando. Se relaciona con un 'halo' de color: http://jsfiddle.net/jSRND/ ¿Alguna idea? Si no es el mismo problema, se iniciará un nuevo hilo. – iamkeir

Encontré una solución para esto también, cortesía de @neil_pie en Twitter: http://jsfiddle.net/dwYCg/8/ – iamkeir

La propiedad background-clip se utiliza para determinar si los fondos se extiende hasta el borde o no. El valor predeterminado es border-box, lo que significa que EXISTE en él, pero si lo configura en padding-box, no lo hace. si usa el cuadro de contenido, el fondo solo se extiende al área de contenido. (fuente: http://www.css3.info/preview/background-origin-and-background-clip/)

La solución para su problema es utilizar: -webkit-background-clip: padding-box;

Es importante tener en cuenta que si está utilizando la notación abreviada para especificar sus otras propiedades de fondo, entonces debería agregarlas después. Parece que la notación abreviada implica un valor de clip predeterminado que anulará uno establecido previamente. (fuente: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed)

Fuente

2011-09-24 19:58:17 Pavot

border-radius falla en safari (recorte feo)

Respuesta

Cuestiones relacionadas