Ejemplo de la implementación de CSS3 en los navegadores más populares:
border-radius:3px;
-moz-border-radius:3px; /* Firefox */
-webkit-border-radius:3px; /* Safari y Chrome */
En Internet Explorer y opera todavía no se puede implementar con CSS3
Siempre eh tenido inconvenientes a la hora trabajar con divs de 100% de ancho, sobre todo si lo que busco es que el div contenido quede centrado.
Sin embargo encontré una solución en la siguiente publicación http://stackoverflow.com/questions/1423651/center-div-inside-another-100-width-div
Tal como se muestra en esa solución la clave está en agregar margin: 0 auto; en el div que está adentro del que tiene 100% de ancho.
Un ejemplo sería algo como esto:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<body>
<div style=”background-color: blue; width: 100%;”>
<div style=”background-color: yellow; width: 90px; margin: 0 auto;“>
Probando
</div>
</div>
</body>
</html>
Las imágenes con transparencia en el formato png se pueden visualizar de manera correcta en la mayoría de los navegadores, excepto en Internet Explorer.
Para resolver este inconveniente agrego el siguiente código en el archivo que contiene los estilos
* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src = “img/blank.gif“):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true)
);
}
Y luego debemos agregar un archivo llamado blank.gif en el directorio donde tenemos las imágenes el cual es una imagen transparente.
(en el código mostrado anteriormente muestro con el texto en negrita: “img/blank.gif” donde img es el directorio de las imágenes).
Acá les dejo el archivo blank.gif
blank.gif: 
(no se ve porque es transparente pero está antes de la palabra blank.gif)
Espero que les solucione el problema.
Existen varias formas de generar un fondo degradado para un Sitio Web. Las más conocidas son mediante el uso de hojas de estilo CSS, o empleando una imagen (jpg, gif, etc). Realizarlo con solo CSS sería la mejor opción ya que nuestro Sitio Web quedaría mucho más liviano y cargaría mas rápido por no utilizar imágenes, pero son pocas las versiones de los navegadores que permiten lograr el efecto degradado sólo con CSS. Además, algunos navegadores interpretan instrucciones que otros no interpretan, por lo que hay que programar algunas líneas para uno y otras para otro, de manera que nos complicaríamos demasiado.
En este ejemplo sencillo vamos a utilizar una imagen, y el efecto que pretendemos lograr es un degradado lineal, de forma vertical, que comience en la parte superior con un color fuerte y finalice con un color mas claro en la parte inferior.
Lo primero que tenemos que hacer es crear una imagen con el efecto de degradado, que puede hacerse con Photoshop o un programa similar.
Una vez que tenemos una imagen como la que acabamos de ver, en nuestra hoja de estilos CSS vamos a realizar lo siguiente:
1) Llamamos a la imagen, en el body de nuestra página.
2) Realizamos un bucle de forma horizontal a nuestra imagen para que se repita hasta cubrir todo el ancho de la pantalla.
3) Posicionamos la imagen en la parte superior.
4) Y finalmente agregamos un color de fondo para que cubra todo el resto inferior de la pantalla y sea el que finalice el efecto degradado.
Codigo css
body
{
..
background-image: url(fondo.png); /* llamamos a nuestra imagen*/
background-repeat: repeat-x; /* bucle horizontal*/
background-position: top; /* posicionamos de la imagen en la parte superior */
background-color: #D3F8FC; /* color de fondo restante */
}
Espero que les sea de utilidad.
