Curso IT Fundamentos CSS 024_Bordas, Contorno, Sombras

Bordas

As bordas (Borders) no CSS são propriedades de estilo importantes usadas para criar limites visuais ao redor dos elementos.

Propriedades de Borda

• border-width: Define a largura da borda.
• border-style: Define o estilo da borda (solid: linha contínua, dotted: linha pontilhada, dashed: linha tracejada, double: linha dupla, groove: sulco, ridge: relevo, inset: rebaixado, outset: saliente, none: sem borda).
• border-color: Define a cor da borda.

Exemplo:

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* Propriedade abreviada */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efeito:

Direção da Borda

border-top, border-right, border-bottom, border-left: Definem respectivamente a borda superior, direita, inferior e esquerda.

Exemplo:

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

Efeito:

Cantos Arredondados

border-radius: Define os cantos arredondados da borda.

Exemplo:

1
    .example1 {
2
        border-radius: 10px;
3
        /* Todos os cantos têm raio de 10px */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efeito:

Sombras

A sombra (box-shadow) no CSS é uma propriedade que cria efeitos de sombra ao redor dos elementos. As sombras podem ser usadas para melhorar a sensação tridimensional dos elementos, fazendo a página parecer mais viva. Adicionando a palavra-chave inset antes do valor de box-shadow, sombras internas podem ser criadas. Múltiplos efeitos de sombra podem ser adicionados separando vários valores de box-shadow por vírgulas. Se um elemento tiver cantos arredondados, a sombra será aplicada correspondentemente nos cantos arredondados.

As sombras podem ter múltiplos parâmetros, incluindo deslocamento horizontal, deslocamento vertical, raio de desfoque, cor da sombra, etc.

• Deslocamento horizontal (horizontal offset): O deslocamento horizontal da sombra.
• Deslocamento vertical (vertical offset): O deslocamento vertical da sombra.
• Raio de desfoque (blur radius): O grau de desfoque da sombra.
• Raio de expansão (spread radius): O tamanho da sombra, valores positivos a ampliam, valores negativos a reduzem.
• Cor da sombra: A cor da sombra.

Exemplo:

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

Efeito:

Contorno

O contorno (outline) no CSS é uma borda visível que pode ser adicionada ao redor dos elementos, geralmente usada para destacar a borda exterior dos elementos. O contorno não afeta o layout e não altera o tamanho ou a posição do elemento. O contorno é comumente usado para visualização do foco em elementos de formulário, estado ativo de links, etc.

• outline-color: Define a cor do contorno.
• outline-style: Define o estilo do contorno.
• outline-width: Define a largura do contorno.
• outline-offset: Define o deslocamento do contorno, o espaço entre o contorno e a borda.

Exemplo:

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efeito: