A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos. É possível usar essa propriedade para emular o comportamento dos navegadores (browsers) que não suportam corretamente a especificação da propriedade CSS box model.
O box-shadow é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, os separando com virgulas.
Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco e propagação do raio e cor.
box-sizing: border-box; <É uma propriedade do CSS que altera a foma de como o tamanho de um elemento
é calculado.> <Por padrão, o tamanho de um elemento leva em conta sua altura. largura
padding e border.>
box-sizing: content-box; <É o valor padrão de todo elemento, por isso seu uso não é
necessário>
box-shadow: <E uma propriedade de adciona uma sombra em volta de um elemento>
<ela pode ser usado em qualquer elemento da html, tais como divs, spans e ate mesmo imagens>
**box-shadow: 20px 0; <20px deslocamento x"horizontal", 0 deslocamento y"vertical">
<0 siginifica que a sombra esta atrás do elemento> <pode ser usado valores negativos
pra ter deslocamentos pra esquerda e pra cima ex: -20px 0 iria pra esquerda da imagem
0 -20px vai pra cima> <Desfoque é usado no teceiro valor ex: box-shadow: 20px 20px 10px;
10px sera o desfoque que vai dar na sombra> <É possivel colocar uma cor na sombra
usando o quinto elemento com o valor da cor desejada. Ex: box-shadow: 20px 20px 0 0 blue;>**
box-shadow: inset; <Esse valor faz a sombra ir pra parte de dentro da box>
<inset; funciona com divs, spans e outros elementos, mas não com imagens.>
As propriedades box-sizing e box-shadow são duas propriedades CSS separadas, cada uma com seu próprio propósito. Vou explicar cada uma delas separadamente:
box-sizing:
A propriedade box-sizing controla como a largura e a altura de um elemento HTML são calculadas em relação às suas bordas. Ela tem dois valores principais:
content-box (valor padrão): Isso faz com que a largura e a altura do elemento se refiram apenas ao conteúdo do elemento, excluindo a borda e o preenchimento.border-box: Com esse valor, a largura e a altura incluem tanto o conteúdo quanto a borda e o preenchimento do elemento. Isso torna mais fácil criar layouts previsíveis, pois você não precisa se preocupar com a largura total de um elemento sendo afetada pela adição de bordas ou preenchimento.Exemplo de uso:
.elemento {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid #000;
}
box-shadow:
A propriedade box-shadow permite que você adicione sombras a elementos HTML. Ela tem a seguinte sintaxe:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
horizontal offset: Define o deslocamento horizontal da sombra.vertical offset: Define o deslocamento vertical da sombra.blur radius: Define o raio de desfoque da sombra.spread radius: Define o raio de propagação da sombra (opcional).color: Define a cor da sombra.Exemplo de uso:
cssCopy code
.elemento {
box-shadow: 5px 5px 10px #888888;
}
Neste exemplo, o elemento terá uma sombra que se desloca 5 pixels horizontalmente e 5 pixels verticalmente, com um raio de desfoque de 10 pixels, e a cor da sombra será cinza (#888888).
Portanto, essas são propriedades independentes com finalidades diferentes, mas você pode usá-las juntas em um elemento para criar um efeito de sombra em um elemento cujo tamanho seja afetado pelo valor da propriedade box-sizing.