Propriedades de CSS relacionadas à decoração do modelo de caixa
Este artigo explica as propriedades de CSS relacionadas à decoração do modelo de caixa.
Você pode aprender a escrever propriedades como bordas e sombras.
YouTube Video
HTML para Visualização
css-decoration.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-decoration.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>Box Decoration Related CSS Properties Example</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Box Decoration</h2>
20 </header>
21 <article>
22 <h3>border</h3>
23 <section>
24 <header><h4>border: 3px solid #333</h4></header>
25 <section class="sample-view">
26 <div class="border-solid">Solid Border</div>
27 </section>
28 <header><h4>border: 3px dashed #666</h4></header>
29 <section class="sample-view">
30 <div class="border-dashed">Dashed Border</div>
31 </section>
32 <header><h4>border: 5px double #999</h4></header>
33 <section class="sample-view">
34 <div class="border-double">Double Border</div>
35 </section>
36 <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
37 <section class="sample-view">
38 <div class="border-rounded">Rounded Border</div>
39 </section>
40 </section>
41 </article>
42
43 <article>
44 <h3>border-radius</h3>
45 <section>
46 <header><h4>border-radius: 20px</h4></header>
47 <section class="sample-view">
48 <div class="border-radius-all-rounded">All corners rounded</div>
49 </section>
50 <header><h4>border-top-left-radius: 20px</h4></header>
51 <section class="sample-view">
52 <div class="border-radius-top-left-rounded">Top-left rounded</div>
53 </section>
54 <header><h4>border-radius: 50px / 25px</h4></header>
55 <section class="sample-view">
56 <div class="border-radius-ellipse-corners">Ellipse corners</div>
57 </section>
58 </section>
59 </article>
60
61 <article>
62 <h3>outline</h3>
63 <section>
64 <h4>Outline Examples</h4>
65 <header><h4>outline: 2px solid red</h4></header>
66 <section class="sample-view">
67 <div class="outline-solid">Solid Red Outline</div>
68 </section>
69 <header><h4>outline: 3px dashed blue</h4></header>
70 <section class="sample-view">
71 <div class="outline-dashed">Dashed Blue Outline</div>
72 </section>
73 <header><h4>outline: 4px double green</h4></header>
74 <section class="sample-view">
75 <div class="outline-double">Double Green Outline</div>
76 </section>
77 <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
78 <section class="sample-view">
79 <div class="outline-offset">Outline with Offset</div>
80 </section>
81 </section>
82 </article>
83
84 <article>
85 <h3>box-shadow</h3>
86 <section>
87 <h4>Box Shadow Examples</h4>
88 <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
89 <section class="sample-view">
90 <div class="box-shadow-basic-shadow">Basic Shadow</div>
91 </section>
92 <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
93 <section class="sample-view">
94 <div class="box-shadow-inset-shadow">Inset Shadow</div>
95 </section>
96 <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
97 <section class="sample-view">
98 <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
99 </section>
100 </section>
101 </article>
102 </main>
103</body>
104</html>Decoração
Propriedade border
1.border-solid, .border-dashed, .border-double, .border-rounded {
2 background-color: lightsteelblue;
3}
4
5.border-solid {
6 border: 3px solid #333;
7}
8
9.border-dashed {
10 border: 3px dashed #666;
11}
12
13.border-double {
14 border: 5px double #999;
15}
16
17.border-rounded {
18 border: 2px solid #000;
19 border-radius: 15px;
20}A propriedade border é usada no CSS para definir a moldura de um elemento. border consiste em três elementos: largura, estilo e cor, que são combinados para definir a moldura de um elemento.
Estrutura Básica de border
1/* Shorthand syntax */
2border: [border-width] [border-style] [border-color];
3
4/* Example of border property */
5border: 5px solid white;
6
7/* Example of individual properties */
8border-width: 5px;
9border-style: solid;
10border-color: black;-
Use
border-widthpara especificar a espessura da borda. As unidades são especificadas empx,em,%, etc. -
Especifique o tipo de borda com
border-style. Você pode especificar os seguintes valores.- Valores de Estilo:
none(sem borda)solid(linha sólida)dotted(linha pontilhada)dashed(linha tracejada)double(linha dupla)groove(linha em relevo)ridge(linha em alto-relevo)inset(linha com sombra interna)outset(linha com sombra externa)
- Valores de Estilo:
Especifique a cor da borda com border-color. A cor pode ser especificada usando nomes de cores, rgb(), rgba(), hex, etc.
Configurações individuais para cada lado
1.box {
2 border-top: 3px solid red; /* Top border: 3px solid red */
3 border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4 border-bottom: 2px double green; /* Bottom border: 2px double green */
5 border-left: 1px dotted black; /* Left border: 1px dotted black */
6}Você também pode definir estilos diferentes para cada lado assim.
Configurações individuais para largura, estilo e cor
1.box {
2 /* Specify border width for top, right, bottom, and left */
3 border-width: 2px 4px 6px 8px;
4
5 /* Specify border style for top, right, bottom, and left */
6 border-style: solid dotted dashed double;
7
8 /* Specify border color for top, right, bottom, and left */
9 border-color: red green blue yellow;
10}Você também pode especificar cada aspecto separadamente usando border-width, border-style e border-color.
Combinando com border-radius
1.box-rounded {
2 border: 2px solid #000;
3 border-radius: 10px; /* Round corners by 10px */
4}Usando a propriedade border-radius, você pode arredondar os cantos da borda.
Propriedade border-radius
1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
2 background-color: lightsteelblue;
3}
4
5/* Round all corners */
6.border-radius-all-rounded {
7 border-radius: 20px;
8}
9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12 border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17 border-radius: 50px / 25px;
18}A propriedade border-radius é usada para arredondar os cantos de um elemento. Você pode curvar suavemente os quatro cantos de um elemento HTML, transformando retângulos ou quadrados em um design arredondado.
Explicação:
- A classe
border-radius-all-roundedarredonda todos os cantos com 20 pixels, resultando em uma caixa suavemente arredondada. - A classe
border-radius-top-left-roundedarredonda apenas o canto superior esquerdo com 20 pixels, mantendo os outros cantos retos. - A classe
border-radius-ellipse-cornerscria cantos elípticos, resultando em uma caixa com formato arredondado esticado horizontalmente.
O formato da propriedade border-radius
1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;- O valor da propriedade
border-radiusé geralmente especificado em pixels ou porcentagens. Além disso, você pode definir de 1 a 4 valores.- Especificar um valor faz com que todos os cantos sejam arredondados uniformemente.
- Especificar dois valores aplica o primeiro valor aos cantos superior esquerdo e inferior direito, e o segundo valor aos cantos superior direito e inferior esquerdo.
- Ao especificar quatro valores, você pode definir raios diferentes para cada canto. Os valores são aplicados no sentido horário a partir do canto superior esquerdo.
- Você também pode especificar individualmente como
border-top-left-radius.
1border-radius: 50px / 25px;- A propriedade
border-radiustambém pode especificar os raios vertical e horizontal individualmente para tornar os cantos elípticos. Nesse caso, separe com/.- Por exemplo, especificar
50px / 25pxdefine o raio horizontal como 50 pixels e o raio vertical como 25 pixels.
- Por exemplo, especificar
Resumo
- A propriedade
border-radiusé usada para arredondar os cantos de um elemento. - Você pode especificar o arredondamento dos cantos em pixels ou porcentagens, aplicá-lo a todos os cantos, cantos específicos ou torná-los elípticos.
- É útil para designs flexíveis e personalização de interfaces de usuário.
Propriedade outline
1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
2 background-color: lightsteelblue;
3}
4
5.outline-solid {
6 outline: 2px solid red;
7}
8
9.outline-dashed {
10 outline: 3px dashed blue;
11}
12
13.outline-double {
14 outline: 4px double green;
15}
16
17.outline-offset {
18 outline: 2px solid purple;
19 outline-offset: 10px;
20}A propriedade outline é uma propriedade CSS para definir a linha desenhada ao redor de um elemento.
outline é semelhante a border, mas difere nos seguintes pontos:.
outlinenão afeta o modelo de caixa do elemento, portanto, não impacta o layout do elemento.- Como
outlineé desenhado fora do elemento, ele aparece fora deborder. borderé desenhado dentro do elemento, por isso pode afetar o tamanho e o layout do elemento.
Neste exemplo, a propriedade outline é definida da seguinte forma:.
- A classe
outline-soliddefine um contorno vermelho sólido com 2px de espessura. - A classe
outline-dasheddefine um contorno azul tracejado com 3px de espessura. - A classe
outline-doubledefine um contorno verde com linha dupla de 4px de espessura. - A classe
outline-offsetdefine um espaço de 10px entre o contorno e o elemento.
Sintaxe Básica
1element {
2 outline: outline-width outline-style outline-color;
3 outline-offset: 10px;
4}outline-width
outline-widthespecifica a espessura do contorno.- Você pode especificar valores como
thin,medium,thick, ou em unidades comopx,em.
outline-style
outline-styleespecifica o estilo do contorno.- Você pode especificar estilos como
solid,dotted,dashed,double,groove,ridge,inset,outset,none, etc.
outline-color
outline-colorespecifica a cor do contorno.- Você pode especificar qualquer cor usando nomes, HEX, RGB, etc.
outline-offset
outline-offsetespecifica a distância entre o contorno e o elemento.- Você pode especificar valores exatos em unidades como
px,em, etc.
Propriedade box-shadow
1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
2 background-color: lightsteelblue;
3}
4
5/* Basic shadow */
6.box-shadow-basic-shadow {
7 box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
8}
9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12 box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18 -5px -5px 10px rgba(255, 0, 0, 0.5);
19}A propriedade box-shadow é usada para adicionar sombras a elementos. Ao usar esta propriedade, você pode criar sombras ao redor dos elementos para expressar uma sensação de dimensionalidade e profundidade.
Explicação:
-
Na classe
box-shadow-basic-shadow, uma sombra preta desfocada é exibida na parte inferior direita do elemento. -
Na classe
box-shadow-inset-shadow, uma sombra desfocada é exibida dentro do elemento. Com a sombra entrando para dentro, você pode obter um design rebaixado. -
Na classe
box-shadow-multiple-shadow, duas sombras, preta e vermelha, são aplicadas ao elemento. Como elas são exibidas em posições diferentes, é obtido um efeito tridimensional.
Formato da Propriedade box-shadow
1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];Significado de cada valor
O primeiro horizontal offset é o valor do deslocamento horizontal, especificando a posição da sombra em relação ao lado esquerdo do elemento. Especificar um valor positivo posiciona a sombra à direita, e um valor negativo a posiciona à esquerda.
O segundo vertical offset é o valor do deslocamento vertical, especificando a posição da sombra em relação ao lado superior do elemento. Especificar um valor positivo posiciona a sombra abaixo, e um valor negativo a posiciona acima.
O terceiro blur radius é o valor para a quantidade de desfoque, especificando o nível de desfocagem da sombra. Quanto maior o valor, mais a sombra se espalha, resultando em uma sombra mais desfocada. Especificar um valor positivo posiciona a sombra abaixo, e um valor negativo a posiciona acima. Isto é opcional, e o padrão é 0, o que significa nenhuma desfocagem na sombra.
O quarto spread radius é o valor do alcance de expansão, especificando o quanto a sombra se espalha. Especificar um valor positivo fará a sombra crescer, enquanto um valor negativo fará com que ela diminua. Este valor também é opcional.
O quinto color é o valor da cor, especificando a cor da sombra. As cores podem ser definidas usando nomes de cores, RGB, HEX, HSL e outros modelos de cores disponíveis no CSS. Se omitido, a cor padrão do texto do elemento (valor da propriedade color) é aplicada.
Você também pode especificar primeiro a palavra-chave inset. Especificar a palavra-chave inset desenha a sombra dentro do elemento, em vez de fora. Também é possível definir várias sombras separadas por vírgulas.
Exemplo de box-shadow
Exemplo básico de sombra
1div {
2 box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}- O deslocamento horizontal é
10px, criando uma sombra 10 pixels à direita. - O deslocamento vertical é
10px, criando uma sombra 10 pixels para baixo. - O raio de desfoque é
5px, resultando em um desfoque de sombra de 5 pixels. - A cor é
rgba(0, 0, 0, 0.5), resultando em um preto semitransparente.
Exemplo de sombra interna
1div {
2 box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}- Usar
insetdesenha a sombra dentro do elemento.
Exemplo de múltiplas sombras
1div {
2 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}- Você também pode definir múltiplas sombras separadas por vírgulas. Neste exemplo, duas sombras são aplicadas: uma sombra preta e uma sombra vermelha.
Resumo
box-shadowé uma propriedade usada para adicionar sombras aos elementos, criando uma sensação de profundidade.- Ao combinar deslocamentos horizontal e vertical, desfoque, raio de expansão e cor, uma variedade de efeitos pode ser alcançada.
- Você pode desenhar sombras internas com
insete também definir múltiplas sombras de uma vez.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.