Cómo establecer el borde interior en CSS
Cuando se coloca un borde dentro del contenedor, se conoce como el borde interno. Se utilizan bordes internos para que el contenedor estable. Cuando se crea un contenedor, su altura y ancho generalmente se expanden con la adición de diferentes propiedades, como el relleno. Para evitar esta situación, se coloca un borde dentro del contenedor.
En este artículo, aprenderemos cómo establecer el borde interno en CSS.
Cómo establecer el borde interior en CSS?
En CSS, se puede establecer un borde interno utilizando las siguientes propiedades:
- propiedad de tamaño de caja
- propiedad de la propiedad
- propiedad de shadow de caja
Exploremos cada propiedad con ejemplos útiles.
Método 1: Uso de la propiedad de tamaño de caja para establecer el borde interior en CSS
El "dimensionador"La propiedad mantiene la altura y el ancho del contenedor cuando se le agrega el relleno o el borde. Cuando la propiedad de tamaño de caja se usa con el "caja de fronterasValor, el relleno y el borde del elemento se incluirán en la altura y el ancho totales.
Ahora, mira el ejemplo proporcionado.
Ejemplo
Actualmente, nuestra página web tiene un contenedor con altura y ancho establecido como "250px". Sin embargo, cuando hemos agregado un borde, la altura especificada y el valor de ancho se expande a "276px", Que se puede ver en la imagen dada a continuación:
En nuestro archivo HTML, hemos agregado un ""Con una clase"ejemplo"Y lo colocó dentro del"" etiqueta:
Para diseñar el contenedor creado, pon un "."Antes del nombre de clase como".ejemplo". Luego, especifique la altura y el ancho como "250px", selecciona el "13px"Border naranja, y usa el"caja de fronteras"Como la propiedad del tamaño de la caja. Además, también hemos establecido el "color de fondo" como "agua"Distinguir entre el fondo y el borde agregado.
Guarde el código proporcionado y abra el archivo HTML en su navegador:
.ejemplo
Color de fondo: Aqua;
Ancho: 250px;
Altura: 250px;
borde: 13px de naranja sólida;
dimensionamiento de la caja: border-box;
Como resultado, el borde se agregará dentro del contenedor, y la altura y el ancho permanecerán mismos:
Avanzar hacia el siguiente método!
Método 2: Uso de la propiedad de esquema para establecer el borde interno en CSS
El CSS "describir"La propiedad agrega fácilmente una línea alrededor de la caja del elemento con el ancho, el color y el tipo deseados. Esto significa que podemos utilizar la propiedad de esquema para establecer el borde interno. Además, el "compensación de esquema " La propiedad ayuda a restringir la expansión de la frontera.
Ejemplo
Especifica el "describir"Propiedad con el valor"Orange sólido 12px", Donde el naranja es el color de la línea y 12px es el ancho, y el sólido es un tipo de estilo para la línea. Entonces, usa el "compensación de esquema"Propiedad junto con el"-12px" valor. Esto colocará el borde dentro del contenedor y restringirá la expansión con respecto al contenedor:
.ejemplo
Color de fondo: Aqua;
Ancho: 250px;
Altura: 250px;
Esquema: sólido 12px de naranja;
Outline -offset: -12px;
Producción
Rovering sobre el contenedor agregado mostrará su dimensión actual que es "250 x 250"Como se especifica en el archivo HTML:
Quiero establecer un borde interno usando sombras? Veamos la siguiente sección.
Método 3: Uso de la propiedad de shadow de caja para establecer el borde interior en CSS
El "sombra de la cajaLa propiedad se usa principalmente para dejar las sombras de los marcos de los elementos. Sin embargo, usar esta propiedad de cierta manera puede establecer el borde interno de manera eficiente.
Ejemplo
En el archivo HTML, indique el "sombra de la caja"Propiedad con el valor"insertado 0px 0px 0px 12px naranja", Donde el naranja es un color, 12px hará que la sombra sea más amplia, y el inserción colocará la sombra dentro del contenedor. Los otros valores 0px están relacionados con la compensación y el desenfoque. La combinación de todos estos valores formará un borde interno usando sombras:
.ejemplo
Color de fondo: Aqua;
Ancho: 250px;
Altura: 250px;
Shadow de caja: inserción 0px 0px 0px 12px naranja;
Producción
Para verificar si la altura y los valores de ancho siguen siendo los mismos, vea la dimensión del contenedor al pasar el paso sobre ella:
Hemos ofrecido los métodos más apropiados para establecer bordes internos en CSS.
Conclusión
Para establecer el borde interno, puede usar el "dimensionador","describir", y "sombra de la caja"Propiedades CSS. La propiedad de tamaño de caja se utiliza para restringir la expansión del borde agregado. La propiedad de esquema se usa en combinación con la compensación de esquema para agregar un esquema como borde interno. Además, las sombras también se pueden utilizar para el propósito especificado con la ayuda de la propiedad de la bandeja. En esta publicación, hemos descrito tres métodos para establecer el borde interno en CSS.