Cómo codificar una frontera de lujo en HTML

May 6

páginas Web usan una combinación de HTML y CSS (Cascading Style Sheets) para crear diseños que van desde simples a complejos. El uso de CSS nivel 3 (CSS3) propiedades, se puede tomar el código HTML y estilo con las fronteras de lujo. Las opciones incluyen estilos de borde, tales como puntos o estriada, esquinas curvas y bordes de la imagen. El tipo de borde que crea depende en gran medida de su propia imaginación.

Instrucciones

Creación de base CSS Fronteras

1 Abra la página Web en el Bloc de notas para que puedas ver y editar su código. Encontrar el ID de las etiquetas HTML que rodean el contenido en el que desea aplicar el borde:

Contenido...

</ Div>

2 Ir a la parte superior del código y buscar "<style>" etiquetas "entre los <head>" etiquetas. Añadir estas etiquetas si no los encuentra allí:

</ Style>

3 Establecer la propiedad "frontera" para la etiqueta de destino, seleccionándolo por su ID. Dar a los límites que para su anchura, estilo y color:

id_name {

frontera: 10px negro sólido;

}

Utilice uno de los siguientes estilos de borde: discontinua, punteada, doble, surco, inserción, principio, cresta o sólido.

Fronteras de la esquina redondeada

4 Establecer la propiedad "frontera de radio" por debajo de la propiedad "frontera":

la frontera de radio: 25px;

Dará el radio frontera un valor de píxeles mayor que el ancho del borde que ha creado para obtener los mejores resultados - de lo contrario, la frontera mostrará esquinas internas agudas.

5 Modificar la forma de las curvas de fronteras mediante la adición de una barra inclinada después de que el valor de píxel de la "frontera de radio" y la adición de un segundo valor:

la frontera de radio: 25px / 20px;

Este segundo valor cambia la altura de cada curva, mientras que el primer valor afecta a la longitud de la curva.

6 Dé a cada esquina una curva diferente utilizando las propiedades a largo mano en lugar de "la frontera de radio":

border-top-izquierda-radio: 25px / 20px;

Código para cada esquina sigue el patrón anterior.

bordes de la imagen

7 Crear una imagen para su frontera, en un editor de gráficos. La imagen incluirá cada esquina, cada lado y el centro. Medir la altura de las secciones de borde superior e inferior de la gráfica. Medir la anchura de las secciones de borde izquierdo y derecho. Establecer la propiedad "border-width" en el código:

border-width: 140px 120px 120px 100px;

Cada valor en el ejemplo anterior representa el ancho de un lado de la frontera, comenzando en la parte superior y que va en sentido horario.

8 Mida el ancho de cada esquina de su gráfico frontera. Escribe el código "border-image", que incluye la ruta URL de la imagen de fondo y la anchura de cada esquina. Añadir "redondo" para decirle al navegador cómo organizar las piezas:

-frontera imagen: URL ( 'ruta / a / border.png') 140 120 120 100 ronda;

Tenga en cuenta que estos valores, aunque los valores de píxeles, no utilizan el sufijo "px".

9 Duplicar su código "border-image" dos veces, por lo que tiene tres líneas de ese código. Añadir "-moz" a la primera y "webkit" a la segunda para añadir soporte para los dos navegadores:

border-width: 140px 120px 120px 100px;

-moz-border-image: URL ( 'border.png') 140 120 120 100 ronda;

-webkit-border-image: URL ( 'border.png') 140 120 120 100 ronda;

Consejos y advertencias

A partir del momento de la publicación, visualización de imágenes de la frontera está limitada y todavía cambiante. Prueba en varios navegadores y proporcionar retrocesos para los navegadores que no las soportan cuando sea necesario.