Fronteiras têm sido uma parte da CSS desde o início, mas CSS3 acrescenta algumas novas opções muito interessantes. Os navegadores modernos suportam agora fronteiras feitas a partir de uma imagem, bem como cantos arredondados e caixa sombras. Estas técnicas prometem adicionar excitantes novos recursos para seus projetos.

bordas da imagem

CSS3 permite que você use uma imagem para uma fronteira elemento. O mecanismo é bastante poderoso, porque ele detecta as bordas de uma imagem e # 147 fatias # 148--lo para criar as bordas e cantos da fronteira a partir das bordas e cantos da imagem.

A imagem Frame é armazenado como frame.png no mesmo diretório que o arquivo HTML. Tem um centro transparente. Aplicar o seguinte código para adicionar uma borda da imagem em torno de todos os elementos da página:

 h2 {border-width: 15px; border-image: url ( "frame.png") de 25% de repetição - webkit-border-image: url ( "frame.png") de 25% de repetição - moz-border-image: url ( "frame.png") 25% repetibilidade}

Veja como você adicionar uma imagem de fronteira:

1. Adquirir sua imagem.

   A imagem já deve ser concebido como uma espécie de fronteira. Tipicamente, será uma forma em torno das arestas, quer com um centro de cor sólida ou um centro transparente.

2. Especifique a largura da borda.

   Você vai precisar para indicar a largura da borda diretamente. A borda da imagem quadro é redimensionada para caber o tamanho que você quiser.

3. Calcule quanto da borda da imagem que deseja.

   Se você deixar de fora o sinal de porcentagem, o valor calcula em pixels. Você pode adicionar quatro valores, se você preferir usar quantidades diferentes da imagem original para cada limite.

4. Indicar o comportamento que você quer.

   A imagem original quase nunca é o mesmo tamanho que o elemento que você está querendo cercam, para que possa fornecer uma dica para explicar como o navegador deve lidar com os elementos maiores do que o original. As escolhas mais comuns são repetir (Repetir a imagem original) ou esticam (Para ocupar todo o espaço). Com uma imagem simples, como o frame.png utilizado neste exemplo, o resultado será o mesmo.

   

Como adicionar cantos arredondados

CSS mais antigo era conhecido por ser muito rectangular, de modo web designers tentou suavizar seus projetos através da adição de cantos arredondados. Este foi um efeito difícil de conseguir. CSS3 simplifica grandemente a criação de cantos arredondados, com a border-radius regra.

É muito fácil de obter cantos arredondados nesses navegadores que suportam a tag:

Rodada Corners Demonstração

A regra funciona por cortar um arco de cada canto do elemento. O arco tem o raio especificado, portanto, para cantos afiados, você vai querer um pequeno raio. Pode-se medir o raio em qualquer das medições comuns, mas pixels (px) e largura de carácter (EM) é a mais utilizada.

A fronteira não é visível a menos que o elemento tem o cor de fundo ou fronteira definiram. Note que existem variações de cada tag para apoiar cantos específicos. Isso pode ser útil se você não deseja aplicar o mesmo raio a todos os quatro cantos do seu elemento. Os navegadores mais recentes agora suportam o genérico border-radius regra.

Você pode pegar um número de browsers da geração anterior, utilizando o prefixo específico do fornecedor. Se seu navegador não entende o border-radius regra, ele vai simplesmente criar os cantos quadrados ordinários.

Como adicionar uma sombra caixa de

sombras de caixa são muitas vezes adicionados aos elementos para criar a ilusão de profundidade.

O efeito caixa de sombra não é difícil de alcançar, mas ele é normalmente feito como parte de uma definição de classe para que ele possa ser reutilizado em toda a página. Aqui está um código de exemplo:

Box Demonstração Sombra
Esta caixa tem uma sombra

Adicionando uma sombra de caixa é muito mais fácil em CSS3 do que era antes. Aqui estão os passos:

1. Definir uma classe.

   Muitas vezes você vai querer aplicar as mesmas configurações a um número de elementos em uma página, por isso, a sombra caixa é muitas vezes combinados com outros elementos como cor de fundo e fronteira em uma classe CSS que pode ser reutilizado em toda a página.

2. Adicione o caixa-sombra regra.

   Os navegadores mais recentes suportam o padrão caixa-sombra regra, mas você também pode querer incluir prefixos navegador para acomodar mais velho navega.

3. Especificar o deslocamento.

   A sombra é tipicamente compensados ​​a partir do retângulo a que pertence. Os dois primeiros valores indicam o deslocamento horizontal e vertical. Medir utilizando qualquer uma das medições padrão CSS (normalmente pixels ou ems).

4. Determinar as distâncias borrão e se espalhar.

   Você pode modificar ainda mais o comportamento da sombra especificando a rapidez com que a sombra borra e quão longe ela se espalha. Estes são os parâmetros opcionais.

5. Indicar a cor da sombra.

   Você pode fazer a sombra alguma cor que você deseja. Preto e cinza são comuns, mas você pode obter efeitos interessantes por escolher outras cores.

Muitos outros efeitos de sombra são possíveis. Você pode adicionar várias sombras, e você também pode usar o inserir palavra-chave para produzir uma sombra interior para torná-la como parte da página é cortada.