Como adicionar bordas em HTML5 e CSS3 Programming - dummies

Você pode usar o CSS3 para desenhar bordas em torno de qualquer elemento HTML5. Você tem alguma liberdade no tamanho, estilo e cor da borda. Aqui estão duas maneiras de definir propriedades de borda: usando atributos de borda individuais e usando um atalho. As fronteiras realmente não alteram o layout, mas eles adicionam separação visual que pode ser atraente, especialmente quando seus layouts são mais complexos.

Como usar os atributos de borda

Aqui está uma página com uma borda simples desenhada em torno do título.

O código para borderProps. A página html demonstra os princípios básicos das bordas no CSS:

borderProps. html h1 {border-color: vermelho; largura da borda:. 25em; border-style: double;}

Isto tem uma borda

Cada elemento pode ter uma borda definida. As fronteiras exigem três atributos:

• largura : A largura da borda. Isso pode ser medido em qualquer unidade CSS, mas a largura da borda é normalmente descrita em pixels ou ems. ( Lembre-se: Um em é aproximadamente a largura da letra maiúscula "M" na fonte atual.)

• cor : A cor usada para exibir a fronteira. A cor pode ser definida como qualquer outra cor em CSS, com nomes de cores ou valores hexadecimais.

• estilo : O CSS suporta vários estilos de borda. O exemplo ilustra um limite duplo. Isso desenha uma borda com duas linhas mais finas ao redor do elemento.

Você deve definir todos os três atributos se desejar que as bordas apareçam corretamente. Você não pode confiar nos valores padrão para funcionar em todos os navegadores.

Como definir estilos de borda

CSS tem uma lista predeterminada de estilos de borda que você pode escolher. Aqui está uma página com todos os estilos de borda principais exibidos.

Você pode escolher qualquer um desses estilos para qualquer limite:

• Sólido: Uma única linha sólida em torno do elemento.

• Duplo: Duas linhas ao redor do elemento com um espaço entre eles. A largura da borda é a largura combinada de ambas as linhas e a lacuna.

• Groove: Usa sombreamento para simular um groove gravado na página.

• Ridge: Usa o sombreamento para simular um cume desenhado na página.

• Insertar: Usa sombreado para simular um botão pressionado.

• Outset: Usa sombreamento para simular um botão que fura da página.

• Relógio: Uma linha tracejada ao redor do elemento.

• Dotado: Uma linha pontilhada em torno do elemento.

Como usar o atalho de borda

A definição de três atributos CSS diferentes para cada borda é um pouco tediosa. Felizmente, o CSS inclui um atalho de borda acessível que torna as margens muito mais fáceis de definir.

Você não pode distinguir a diferença da saída, mas o código para borderShortcut. html é extremamente simples:

borderShortcut. html h1 {border: red 5px solid;}

Esta página usa o atalho de borda

A ordem na qual você descreve atributos de borda não importa. Basta especificar uma cor, um tamanho e um estilo de borda.

Como criar bordas parciais

Se você quiser, você pode ter um controle mais preciso de cada lado de uma borda. Há uma série de atalhos de fronteira especializados para cada uma das sub-fronteiras.

Esta página aplica um estilo de borda na parte inferior do cabeçalho, bem como diferentes bordas acima, abaixo e para os lados dos parágrafos. As bordas parciais são bastante fáceis de construir, como você pode ver na lista de códigos:

subBorders. html h1 {border-bottom: 5px black double;} p {border-left: 3px preto pontilhado; fronteira-direita: 3px preto pontilhado; border-top: 3px preto tracejado; border-bottom: 3px black groove;}

Este título tem uma borda inferior
Os parágrafos têm várias bordas definidas.
Os parágrafos têm várias fronteiras definidas.

Observe os estilos de borda: border-top, border-bottom, border-left e border-right. Cada um desses estilos age como o atalho de borda, mas só atua em um lado da borda.

Existem também atributos de borda específicos para cada lado (a largura da borda inferior ajusta a largura da borda inferior, por exemplo), mas eles quase nunca são usados ​​porque a versão do atalho é muito mais fácil.