CSS3: Transparente esquina redondeada Problema

Site se encuentra aquí: CLICK TO VIEW THE WEBSITECSS3: Transparente esquina redondeada Problema

Aquí es una imagen del problema: alt text

Como se puede ver, el uso de CSS 3 border-radius y background: transparent que era capaz de hacer lo que parece ser un "recorte" del div. El problema debería ser obvio que las esquinas son transparentes también.

Sé que podría simplemente usar una imagen y el problema se resolvería, pero quiero usar CSS3. Creo que probablemente haya alguna forma ingeniosa de evitar este problema, pero no estoy pensando en eso. Quiero señalar que estoy usando css3pie.com para permitir IE6 a través de la funcionalidad de IE8 CSS3.

Fuente

2010-08-29 ParoX

Creo que en este caso sería una imagen * * ser apropiado, esp. con la forma en que intentas unir ese fondo ... –

offtopic: uso inteligente de la imagen y gradiente de fondo. por un momento me pregunté por qué el fondo cambió de tamaño cuando amplié la ventana en mi pantalla de alta resolución. – mauris

pregunta +1 es interesante –

Esto es un poco hacky

Estas reglas se aplican a la etiqueta p

-webkit-box-shadow: #A3AFC6 0px -4px 0px 3px;

Fuente

2010-08-29 22:10:54 Gilsham

Muchas gracias. Ni siquiera pensé en hacer una sombra de caja. – ParoX

Esto funcionó para mí en la barra de herramientas de desarrollador de Chrome ...

En div.middle_bg establecer la altura a 85px. A continuación, establezca el fondo en la etiqueta p dentro de él.

Fuente

2010-08-29 04:34:42 Corey

¿Qué versión de Chrome funciona para usted? No funciona para mí el uso de Chrome 6.0.472.51 beta en OSX. Tampoco funciona en Safari 5.0.1 en OSX. En ambos casos, veo el recorte como se muestra arriba. – gutch

Lo mismo aquí. la etiqueta 'p' ya lo tiene' background: transparent' ... – ParoX

Oh ... no se dio cuenta de que tenía que ser transparente. Ignorar, soy tonto :) – Corey

CSS3: Transparente esquina redondeada Problema

Respuesta

Cuestiones relacionadas