Como definir a fronteira interna no CSS
Quando uma borda é colocada dentro do recipiente, ela é conhecida como a borda interna. As fronteiras internas são utilizadas para tornar o contêiner estável. Quando um recipiente é criado, sua altura e largura geralmente se expandem com a adição de diferentes propriedades, como o preenchimento. Para evitar essa situação, uma borda é colocada dentro do recipiente.
Neste artigo, aprenderemos a definir a fronteira interna no CSS.
Como definir a fronteira interna no CSS?
No CSS, uma borda interna pode ser definida usando as seguintes propriedades:
- propriedade de tamanho de caixa
- Propriedade do esboço
- Propriedade de Shadow Box
Vamos explorar cada propriedade com exemplos úteis.
Método 1: Usando a propriedade de tamanho de caixa para definir a borda interna no CSS
O "tamanho de caixa”A propriedade mantém a altura e a largura do contêiner quando o preenchimento ou borda é adicionado a ele. Quando a propriedade de tamanho de caixa é usada com o “Border-box”Valor, o preenchimento e a borda do elemento serão incluídos na altura e largura total.
Agora, confira o exemplo fornecido.
Exemplo
Atualmente, nossa página da web possui um contêiner com altura e largura como “250px”. No entanto, quando adicionamos uma borda, o valor especificado de altura e largura se expande para “276px”, Que pode ser visto na imagem abaixo do rumo:
Em nosso arquivo html, adicionamos um “"Com uma aula"exemplo”E colocou -o dentro do“" marcação:
Para modelar o contêiner criado, coloque um “.”Antes do nome da classe como“.exemplo”. Então, especifique a altura e a largura como “250px", colocou o "13px"Borda laranja e use o"Border-box”Como a propriedade de tamanho de caixa. Além disso, também definimos o “cor de fundo" como "Aqua”Para distinguir entre o fundo e a borda adicionada.
Salve o código fornecido e abra o arquivo HTML no seu navegador:
.exemplo
Background-Color: Aqua;
Largura: 250px;
Altura: 250px;
borda: 13px laranja sólida;
Timing de caixa: caixa de fronteira;
Como resultado, a borda será adicionada dentro do recipiente e a altura e a largura permanecerão iguais:
Avance em direção ao próximo método!
Método 2: Usando a propriedade de esboço para definir a fronteira interna no CSS
O CSS “contorno”A propriedade adiciona facilmente uma linha ao redor da caixa do elemento com a largura, cor e tipo desejada. Isso significa que podemos utilizar a propriedade de esboço para definir a fronteira interna. Além disso, o “deslocamento de esboço ” a propriedade auxilia na restrição da expansão da fronteira.
Exemplo
Especifique o "contorno”Propriedade com o valor“laranja sólida de 12 px”, Onde laranja é a cor da linha e 12px é a largura, e sólido é um tipo de estilo para a linha. Então, use o “Offset de esboço”Propriedade junto com a“-12px" valor. Isso colocará a borda dentro do recipiente e restringirá a expansão em relação ao contêiner:
.exemplo
Background-Color: Aqua;
Largura: 250px;
Altura: 250px;
Esboço: Solid 12px Orange;
Offset de esboço: -12px;
Saída
Passar o mouse sobre o contêiner adicionado mostrará sua dimensão atual que é “250 x 250”Conforme especificado no arquivo html:
Deseja definir uma borda interna usando sombras? Vamos verificar a seguinte seção.
Método 3: Usando a propriedade Shadow para definir a borda interna no CSS
O "Sombra da caixa”A propriedade é usada principalmente para soltar as sombras dos quadros dos elementos. No entanto, o uso desta propriedade de uma certa maneira pode definir a borda interna com eficiência.
Exemplo
No arquivo html, declare o “Sombra da caixa”Propriedade com o valor“Inserção 0px 0px 0px 12px laranja”, Onde laranja é uma cor, 12px tornará a sombra mais larga e a inserção colocará a sombra dentro do contêiner. Os outros valores de 0px estão relacionados à compensação e queda. A combinação de todos esses valores formará uma borda interna usando sombras:
.exemplo
Background-Color: Aqua;
Largura: 250px;
Altura: 250px;
Shadow Box: Insert 0px 0px 0px 12px Orange;
Saída
Para verificar se os valores de altura e largura ainda são os mesmos, veja a dimensão do contêiner pairando sobre ele:
Oferecemos os métodos mais apropriados para definir bordas internas no CSS.
Conclusão
Para definir a fronteira interna, você pode usar o “tamanho de caixa","contorno", e "Sombra da caixaPropriedades do CSS. A propriedade de tamanho de caixa é usada para restringir a expansão da borda adicionada. A propriedade de esboço é usada em combinação com o deslocamento de esboço para adicionar um esboço como uma fronteira interna. Além disso, as sombras também podem ser utilizadas para a finalidade especificada com a ajuda da propriedade Shadow Box-Shadow. Neste post, descrevemos três métodos para definir a borda interna no CSS.