? Me estoy encontrando con un problema donde el borde de un div exterior con esquinas redondeadas se corta por un elemento interno con un gradiente CSS3. ¿Es esto un error con CSS3? De ser así, con mucho gusto enviaré un informe de errores.¿Esto es un error con CSS3: esquinas redondeadas con gradiente CSS3
Si no es así, ¿cómo puedo arreglar esto?
& Fuente de demostración aquí: http://jsfiddle.net/joshuamcginnis/2aJ8X/
Captura de pantalla:
El problema no es el degradado: proporcione a su elemento <h2> un fondo sólido para ver. En su lugar, debe redondear las esquinas del <h2>, así como de la envoltura <div>.
Agregue border-radius: 10px 10px 0 0; y las versiones apropiadas del fabricante apropiadas al estilo <h2> y todo funciona.
Esta solución funciona para todos los navegadores excepto IE. Solo lo probé en IE9, donde el relleno de gradiente parece "fluir sobre" los bordes. (¿O me estoy perdiendo algo?) Ver: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-cleaning – cfouche
Las esquinas redondeadas no funcionan en IE8 o menos – Downpour046
esta solución no es bueno si el contenedor tiene desbordamiento: visible y es desplazable, y estoy enfrentando ese problema AHORA MISMO ... – vsync
No es específica a los gradientes de fondo. Es solo el fondo del elemento h2 que se superpone sentado en la parte superior de las esquinas redondeadas. No soy seguro es un error en el sentido más estricto, pero es bastante conocido. La 'solución' más fácil es redondear las esquinas del elemento con el fondo. Example: just setup for chrome
overflow: hidden; no funciona
pero esto hace:
h2
{
position:relative;
z-index:-1;
....
}
gran solución, funciona mejor. – vsync
Es un problema bastante común cuando se establece el fondo en un elemento diferente a las esquinas redondeadas. – Spudley