¿Alguien sabe un buen ejemplo de uso de CSS para crear un cuadro de esquina redondeada donde:

  1. Las 4 esquinas y los 4 lados son imagen. Los lados han repetido img
  2. El ancho es constante mientras que la altura es flexible
  3. Trabaja todo en FF 3.x, IE 7 o superior, Chrome

Házmelo saber. Gracias

2
HP. 6 sep. 2009 a las 09:13

3 respuestas

La mejor respuesta

Bueno, puedes hacerlo con 3 divs.

<div class="bg"><div class="top"><div class="bot">text here</div></div></div>

bg tendría CSS como

background: url(path/to/repeated/background.gif) repeat-y;

Donde el fondo abarca todo el ancho del div, ya que es constante. Eso enlosará los lados izquierdo y derecho.

Y luego, para la parte superior e inferior, solo use imágenes con no-repeat top left; y no-repeat bottom left. Cada uno tendría 2 esquinas más toda la bondad de la imagen en el medio.

Espero que pueda completar los detalles de eso si tiene un conocimiento suficiente de CSS.

2
mpen 6 sep. 2009 a las 06:43

Las propiedades CSS3 para las imágenes de borde son las siguientes:

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

Ejemplo:

border-image: url(border.png) 27 27 27 27 round round;

Mozilla difiere de IE, Chrome, Safari, es decir utilizando propiedades que comienzan con -moz que no sean -webkit

Para obtener más explicaciones sobre estas propiedades, consulte estas definiciones y ejemplos.

Source1, Source2

0
Myra 6 sep. 2009 a las 07:04

No conozco ninguno de esos códigos. Pero sé un mejor código para css esquinas redondeadas sin imágenes.

Echa un vistazo a este enlace

Funciona en todos los navegadores y es fácil de implementar. Lo bueno es que funciona bien en ie6! .. Gran na ..

0
Logesh Paul 6 sep. 2009 a las 06:27