Cómo aplicar un radio Fronteriza en CSS

Cómo aplicar un radio Fronteriza en CSS


Antes de nivel tres de las Hojas de Estilo en Cascada (CSS) salió y ganó el apoyo de los navegadores, esquinas redondeadas en las páginas Web requieren técnicas complicadas usando imágenes cortadas en pedazos. Con la incorporación de la "border-radius" propiedad CSS3, ahora se puede hacer esquinas redondeadas usando sólo una o dos líneas de código y no hay imágenes. Incluso puede dar a cada esquina de un elemento HTML de un radio de borde diferente. La propiedad "border-radius" funciona bien en <div> etiquetas, botones y campos de formulario. Por desgracia, no funciona en versiones antiguas de Internet Explorer.

Instrucciones

1

Abra el archivo HTML de su página Web en un editor de código como jEdit, Notepad ++ o BBEdit. Busque el elemento HTML en la que desea aplicar el radio de frontera mediante la búsqueda de su correspondiente etiqueta. Por ejemplo, la etiqueta para un elemento de párrafo es <p>. Mira los atributos dentro de la etiqueta y encontrar un nombre de clase o nombre de identificación. Si ve ninguno de estos atributos, agrega uno, así:

<Div id = "idName" class = "classname"> Contenidos ... </ div>

Observe que puede volver a utilizar nombres de clases en varias etiquetas, pero sólo se puede utilizar un nombre de identificación para cada etiqueta en una página Web.

2

Vaya a la parte superior de su archivo HTML y añadir <style> entre las etiquetas <head>. Establezca el atributo "tipo" a "text / css" si utiliza HTML 4 o código XHTML. También puede añadirlo si no está seguro qué estándar de HTML que está utilizando. Si su sitio web utiliza una hoja de estilos externa, agregue el código CSS en su lugar.

3

Escribir un selector para "seleccionar" el elemento HTML en CSS. Nombres de las clases de prefijo con períodos y los nombres de identificación de prefijo con símbolos de hash. Selecciona por nombre de etiqueta para seleccionar todas las etiquetas de un tipo específico en la página. Estos son ejemplos de cómo se puede seleccionar elementos HTML:

div {}

idName {}

.nombre de clase {}

4

Establezca la propiedad "border-radius" para su elemento HTML seleccionado. He aquí un ejemplo:

idName {border-radius: 10px;}

En el código anterior, el elemento HTML se bordes redondeados con un radio de diez píxeles cada una. Usted puede utilizar "border-top-izquierda-radio" para aplicar un borde redondeado a la esquina superior izquierda de un elemento, o redonda sólo los bordes inferiores utilizando "border-left-bottom-radio", junto con "border-bottom derecho-radio ".

5

Duplicar sus propiedades "border-radius" y luego añadir el prefijo de proveedor "-webkit" en frente de ellos. El resultado se verá así:

border-radius: 10px;

-webkit-border-radius: 10px;

Duplicar las propiedades originales de nuevo, pero añadir el prefijo "-moz" esta vez. Dondequiera que utilizó una propiedad como "border-top-right-radio", cambie la propiedad prefijo-Mozilla para algo así como "-moz-border-radius-topright." Tenga en cuenta que este código es compatible con Firefox versiones 3.x, pero Firefox 4 y hasta sólo utiliza "border-radius".

Consejos y advertencias

  • Permitir que los navegadores no compatibles para mostrar esquinas afiladas. Esta práctica se conoce como "mejora progresiva", y no afecta al rendimiento global o la facilidad de uso de un diseño de página web. Utilice JavaScript caer-backs para redondear esquinas en navegadores antiguos si todavía quieres las esquinas redondeadas en todos los navegadores.
  • Internet Explorer 8 y por debajo no son compatibles con la propiedad "border-radius".
  • Siempre una copia de seguridad de sus archivos HTML y CSS antes de editarlos.