Radio de esquema de CSS

La mayoría de las veces, tendemos a mezclar la propiedad de esquema de HTML con su propiedad fronteriza. Mientras que ambas propiedades son bastante diversas entre sí. La propiedad fronteriza puede ocupar espacio adicional. El esquema de cualquier elemento no puede ocupar espacio y también puede superponerse con otros elementos. No podemos establecer los lados de un contorno para un elemento específico. Sin embargo, podemos establecer los 4 lados de un borde por separado. Además, no puede cambiar el tamaño o la posición del elemento con la ayuda de un esquema a su alrededor. El contorno siempre está en el lado exterior del elemento y el borde se usa para ser el lado interno del elemento. Representaremos el uso del esquema en los códigos HTML junto con la revisión de su radio.

Ejemplo # 01:

Comencemos con el uso de fronteras en nuestro ejemplo. Después de eso, tendremos una apariencia de la propiedad de esquema. Usando la sintaxis básica de crear un archivo HTML, hemos estado utilizando las etiquetas HTML, Head, Style y Body dentro de este programa de Código Visual Studio. Dentro de la etiqueta del cuerpo, hemos estado usando dos encabezados con el uso de etiquetas de encabezado de tamaño H1 y H2. El H1 es el encabezado más grande disponible y se puede acortar a H6, que es el tamaño más pequeño disponible. El H1 contiene un simple "ejemplo de borde" de 2 palabras. Mientras que el H2 contiene una oración larga. Dentro de la etiqueta de estilo de la etiqueta "Cabeza", hemos estado diseñando el rumbo "H2" agregando un borde de color azul de 3 píxeles. Guardemos este código y lo ejecutemos en el navegador Google Chrome.

Después de ejecutar este código HTML de Código Visual Studio en cualquier navegador, tenemos resultados que se muestran a continuación. El primer encabezado se ha tomado como un encabezado simple sin ningún estilo. Mientras que el segundo encabezado se ha mostrado con el borde sólido de color azul de 3 píxeles a su alrededor.

Agreguemos un borde y contorno tanto al mismo tiempo en cualquier rumbo para ver la diferencia. Hemos estado usando el estilo para el encabezado H2 como se muestra. Hemos estado agregando una línea adicional en el estilo de H1 para la creación de esquema. Este esquema estará en color verde y formato punteado. Cada uno de sus puntos será de 5 píxeles como se especifica. El borde ya se define como 2 píxeles de azul sólido. Guardemos y depugemos este código HTML de Visual Studio y lo ejecutemos en el navegador.

La salida del código HTML anterior ha estado mostrando la página de Below Shows. El color azul alrededor del encabezado "H2" muestra el borde continuo, mientras que la línea verde de píxeles de tamaño 5 ha estado ilustrando el contorno del encabezado 2. Ahora puedes ver la diferencia.

Ejemplo # 02:

El contorno también puede ser sólido, al igual que el borde. Tomemos una apariencia con un ejemplo más para crear un nuevo esquema sólido. Entonces, hemos estado usando el mismo archivo con un poco de diferencia con el código anterior. En este archivo HTML, hemos estado utilizando el mismo encabezado H1 de tamaño 1 y se ha utilizado una etiqueta "div" para crear una nueva sección dentro de la misma página HTML. Puede agregar más de 1 elemento dentro de la sección "Div". En este momento, hemos estado agregando la línea de texto simple para describir la etiqueta "Div" ". Dentro de la etiqueta de estilo de este archivo HTML, hemos estado utilizando el título de la etiqueta "Div" para peinarlo. Estamos utilizando la propiedad de esquema para que sea delineo de 3 píxeles. Este esquema será sólido sin guiones ni puntos. Su color será 'amarillo-verde' como se especifica en el área de estilo. El valor "3px" se ha utilizado para especificar la longitud de un contorno: cuán grueso o delgado. Guardemos este código y lo ejecutemos en el navegador para ver los resultados.

El contorno de color verde amarillo de los píxeles de tamaño 3 se ha generado alrededor del lado exterior del elemento "div". Se ve muy similar a los bordes, aunque su dirección siempre es hacia afuera.

En todos los ejemplos anteriores, hemos cubierto la creación de un borde sólido, un contorno sólido y un esquema punteado en el archivo HTML. Ahora, crearemos un contorno discontinuo alrededor del elemento HTML. Hemos estado tratando de usar el mismo script HTML hasta ahora en el código de Visual Studio. Un solo cambio que hemos hecho en la etiqueta de estilo es el uso de la palabra clave "discontinua" en lugar de "sólido" para diseñar el contorno de 3 píxeles. Además, hemos cambiado el color para el esquema a "Blue-Violet". Guardemos este script actualizado HTML y ejecutártelo.

Después de la depuración exitosa de este código HTML dentro del código de Visual Studio, se ha ejecutado dentro del navegador Chrome y tenemos la salida mostrada a continuación. El contorno discontinuo de Violeta azul se ha generado alrededor de la sección "Div" de esta página estática HTML.

Ejemplo # 03:

Echemos un vistazo al radio de un esquema en el script HTML. Como ya hemos discutido en el párrafo introductorio, no podemos especificar los valores para cada lado del esquema por separado como podemos hacer para los bordes. Entonces, dentro del mismo archivo HTML, hemos actualizado el cuerpo y la etiqueta de estilo según sea necesario. Hemos estado usando un total de 1 etiqueta de encabezado "H1", 4 etiquetas "div" y 3 etiquetas de párrafo "P".

El encabezado será del tamaño más grande ("Ejemplo de esquema"), mientras que las 4 etiquetas "Div" contienen 4 clases especificadas "A", "B", "C" y "D" para la creación de 4 secciones dentro de las secciones dentro de las misma página HTML. Los párrafos se han dejado vacíos solo por el estilo. Esto es para la etiqueta "cuerpo". Usando las clases específicas de cada etiqueta "div", hemos estado especificando la propiedad de "esquema" dentro de ella. Creará un contorno de violeta azul-violeta para la primera y tercera sección "div" y un contorno de violeta azul "punteado" para la segunda y cuarta etiqueta "div" "div". Todos estos contornos serán del mismo ancho, "4px". Hemos estado utilizando la propiedad de los contornos "-Moz-Outline-Radius" para establecer valores para cada lado del contorno por separado. Hemos estado ajustando el radio del lado izquierdo para Div 1, lado izquierdo/derecho para Div 2, lado izquierdo/derecho/superior para Div 3 y los 4 lados para Div 4. El ancho, el margen y el relleno para las 4 secciones "Div" han sido las mismas. Probemos el resultado de este código ahora.

Después de la ejecución de este código HTML, obtuvimos el mismo tamaño de contornos de 4 píxeles para todas las secciones. El uso de la propiedad RADIUS no afecta la salida, mientras que el ancho se ha actualizado utilizando el "ancho" de la sección "div".

Conclusión:

El párrafo introductorio se ha utilizado para demostrar la clara diferencia entre la propiedad fronteriza y la propiedad de esquema del estilo CSS en HTML. Dentro de los ejemplos que hemos utilizado en la implementación de este artículo, hemos discutido la creación de diferentes tipos de contornos en comparación con las fronteras junto con sus diferencias. Además, hemos discutido el ejemplo para mostrar que el radio de un esquema no se puede cambiar y depende totalmente de la frontera del elemento para que se resalte y también puede superponerse.