SoftPerfect Network Scanner – NetScan – Scaneo de la Red
22/09/2011.Net: Y las Variables Globales en C#?
20/10/2011Dentro del diseño web, una de las necesidades de todo diseño, es el de poder dar un formato redondeado a los bordes de los cuadros.
Para ello es preciso añadir el siguiente código:
-
#contenedorr3 {
-
border-radius:3px;
-
-moz-border-radius:3px; /* Firefox */
-
-webkit-border-radius:3px; /* Safari y Chrome */
-
-
/* Otros estilos */
-
border:1px solid #333;
-
background:#eee;
-
width:100%;
-
padding:5px;
-
}
el secreto está en el "border-radius" que indica la graduación del borde (a mayor graduación mayor será el efecto redondeado del objeto)
lo siguiente será aplicarlo a cualquier contenedor de la siguiente forma
-
"contenedorr3"
-
-
Este es un contenedor con bonitos bordes redondeados de 3px
-
Es posible especificar un radio diferente para cada esquina. Se puede hacer en una sola linea o trabajandolo un poco más.
-
border-radius: 3px 10px 2px 10px;
o bien
-
#contenedorr10{
-
-moz-border-radius-topleft:0px;
-
-moz-border-radius-topright:10px;
-
-moz-border-radius-bottomleft:10px;
-
-moz-border-radius-bottomright:0px;
-
-
-webkit-border-top-left-radius:0px;
-
-webkit-border-top-right-radius:10px;
-
-webkit-border-bottom-left-radius:10px;
-
-webkit-border-bottom-right-radius:0px;
-
-
/* Otros estilos */
-
border:1px solid #333;
-
background:#eee;
-
width:100%;
-
padding:5px;
-
}
A continuación os dejo un blog de donde me he ilustrado
Actualización...
Agradezo un articulo de gaston, que profundiza más sobre el tema y del que hago un breve resumen.
Lo que según la W3C debería unificar en un criterio de propiedad para poder realizar bordes redondeados, hasta hace poco, cada fabricante de navegadores ha ido a su **** bola (los asteríscos es para no poner puta bola). Pues bien, aquí cada uno quería imponer su ley, y al final lo que han provocado es que nuestro fichero CSS sea más gordo de lo normal, ya que tenemos que prever los diferentes navegadores con que abrirán nuestra página.
Comencemos con como redondearía...
MOZILLA FIREFOX
-moz-border-radius: 10px;
el "-moz" del principio, indica que es exclusivamente para mozilla, y que el resto de navegadores no lo interpretará.
INTERNET EXPLORER
-ms-border-radius:10px;
aquí han utilizado el "-ms" para comenzar la propiedad
WEBKIT Y SAFARI
-webkit-border-radius:10px;
aquí les mola poner más letras...y optan por poner directamente "-webkit"
Total, que algo tan senzillo como poner
border-radius:10px;
estos tios tan listos, han querido ponerle su nombre a la propiedad...
En fin, esperemos que unos añitos, esté corregido y nos centremos exclusivamente en esta última opción más genérica y apropiada.
