CSS elimina el borde
Ejemplo 01:
Comencemos con la ilustración más básica de eliminar el borde de elementos específicos del script HTML. Para esto, hemos estado comenzando nuestro código con la etiqueta principal "HTML" del script HTML. Discutamos primero la etiqueta "cuerpo" como se muestra a continuación. Utiliza dos encabezados del tamaño más grande, "1". Ambos encabezados se usan aquí con diferentes títulos para diferenciarlos. Además, hemos especificado las clases "A" y "B" dentro de las etiquetas de encabezado por separado para usar estas clases dentro del estilo para diseñar por separado ambos encabezados.
Dentro de la etiqueta "estilo", hemos estado diseñando por separado tanto los encabezados con el uso de sus clases "A" como "B". Hemos agregado el relleno de 10 píxeles y el ancho de 400 píxeles para los encabezados a través de la propiedad de relleno y ancho. Por lo tanto, hemos estado asignando un borde verde sólido de 3 píxeles al primer encabezado a través de la propiedad fronteriza y para el segundo encabezado, la propiedad fronteriza se ha establecido en ninguno. Guardemos este script HTML y lo ejecutemos dentro del navegador Chrome.
La salida de esta página web se ha mostrado en la pestaña Chrome. El primer encabezado se ha mostrado con un borde sólido verde de 3 píxeles. El segundo encabezado se ha mostrado sin borde, el mismo ancho y algo de relleno.
Echemos un vistazo a cómo se puede quitar un lado de un borde del elemento utilizando la propiedad de borde mejorada. Por lo tanto, hemos actualizado el código anterior como se muestra en la imagen a continuación. Hemos estado usando la misma etiqueta de cuerpo junto con sus etiquetas o encabezados internos. Dentro de la etiqueta de estilo de este archivo HTML, hemos agregado propiedades de margen y acolchado para extender uniformemente los encabezados en la página web. Luego, utilizamos la propiedad fronteriza para ambos encabezados por separado. Cada borde de 3 píxeles se ha establecido para ambos. El primer encabezado contendrá un borde de color verde y el segundo encabezado contendrá un borde de color azul.
Mientras que las propiedades de los bordes de la derecha fronteriza y de la izquierda fronteriza se han establecido en "ninguno" para que los encabezados eliminen el lado derecho e izquierdo del encabezado 1 y el encabezado 2 respectivamente. Guardemos y ejecutemos esta actualización.
La salida ha estado mostrando dos encabezados de bordes verdes y azules. Mientras se elimina el lado derecho del primer borde y el lado izquierdo del segundo borde. Esto ha sucedido debido al uso de la propiedad fronteriza y la propiedad fronteriza de las fronteras después de establecer ambos en "ninguno".
Ejemplo 02:
Junto con la creación de un borde sólido, también puede crear un esquema para cualquier elemento específico de una página web HTML sin usar el borde. El contorno y las fronteras se ven visiblemente similares, pero son bastante diferentes en las propiedades. Usemos la propiedad de esquema de HTML Scripting Language para crear un esquema punteado. Usaremos el mismo archivo HTML sin cambiar gran parte de su script. Se ha utilizado el mismo cuerpo con sus etiquetas y un estilo bastante similar. El único cambio se ha realizado dentro de la etiqueta de estilo donde hemos estado configurando el CSS para ambos encabezados.
Aquí, hemos estado utilizando la propiedad de esquema para ambos encabezados. El esquema para el primer encabezado sería de 3 píxeles salpicados en color azul, mientras que el otro encabezado no contendrá ningún encabezado según el valor "Ninguno" establecido para la propiedad de esquema. Guardemos y depugemos este script HTML para ver los resultados a través del código de Visual Studio.
Después de la depuración, abrimos la página HTML en el navegador Chrome y obtuvimos el resultado a continuación. La página HTML de salida muestra el primer encabezado con un contorno punteado y el segundo encabezado sin contorno o borde.
Esto se trataba de la creación de un esquema alrededor de los encabezados. Creemos contornos discontinuos, punteados y sólidos para encabezados dentro del código HTML. Hemos estado utilizando un total de 4 párrafos en esta página web utilizando la etiqueta "P" en la etiqueta del cuerpo junto con sus clases específicas que se han especificado, A, B, C y D. Dentro de la etiqueta de estilo, hemos estado usando las clases para párrafos para diseñar por separado cada párrafo. El margen de la propiedad, el relleno y la propiedad de ancho se utilizan con los mismos valores para los tres párrafos. Hemos estado utilizando la propiedad fronteriza para el primer párrafo para crear un párrafo punteado de color rojo. La propiedad fronteriza establecida en "ninguno" se ha utilizado para el segundo párrafo para crear un borde sin borde. La tercera propiedad fronteriza dentro de la "P.El párrafo de clase C "se ha utilizado para establecer el borde de color de chocolate discontinuo de 3 píxeles. En el último estilo, hemos estado utilizando la propiedad del borde para agregar el borde sólido de 3 píxeles del color púrpura alrededor del cuarto encabezado de esta página. Guardemos este código y lo ejecutemos para ver los resultados.
La salida de este programa HTML ha mostrado la visualización de un encabezado y 4 párrafos. El primer párrafo está rodeado por un borde rojo punteado, el segundo no tiene borde, el tercero tiene un borde de color de chocolate discontinuo y el último tiene un borde de color sólido.
Ejemplo 03:
Echemos un vistazo a nuestro último ejemplo para eliminar un borde del entorno de la mesa. Para esto, usaremos dos tablas para comparar. Dentro de la etiqueta del cuerpo de este archivo HTML, hemos estado utilizando dos etiquetas de tabla separadas para crear tablas. Ambas tablas tienen las mismas columnas de encabezado y las mismas columnas de datos, 3 columnas y 3 filas. Hemos estado asignando diferentes "ID" a ambas tablas para diferenciarlas dentro de la etiqueta de estilo, A y B.
Dentro de la etiqueta de estilo, hemos estado usando el mismo margen, acolchado y propiedad de borde para ambas tablas. Para la clase "B" de la Tabla 2, hemos estado utilizando la propiedad del border colapso establecido para "colapsar" para colapsar el borde de una mesa. Guardemos y ejecutemos este código ahora.
La salida para este código HTML ha estado mostrando dos tablas estáticas. El primero es con el borde interno y externo, mientras que el segundo tiene su borde colapsado.
Conclusión:
Este artículo ha presentado el uso de la propiedad fronteriza para eliminar uno o más lados de los bordes alrededor de cualquier elemento de una página web HTML. Hemos discutido cómo se pueden utilizar las propiedades fronterizas, fronterizas, la derecha, la cima de la frontera y el fondo fronterizo para este propósito únicamente. También hemos discutido el uso del borde y el esquema dentro de estos ejemplos y discutimos cómo se puede utilizar una propiedad de colapso fronterizo para la eliminación de fronteras alrededor del elemento de la tabla. Hemos agregado las ilustraciones más simples para que los lectores alcancen el nivel de comprensión.