CSS3 Border
CSS3 Border
Com CSS3, você pode criar cantos arredondados, adicione uma caixa de sombra, e como a imagem da fronteira sem o uso de programas de design como Photoshop.
Neste capítulo, você vai aprender as seguintes propriedades de fronteira:
- border-radius
- box-shadow
- border-image
CSS3 cantos arredondados
Adicionar filetes complicadas em CSS2. Tivemos de usar uma imagem diferente a cada esquina.
Em CSS3, é muito fácil criar cantos arredondados.
No CSS3 propriedade border-radius é usado para criar cantos arredondados:
Este é arredondado fronteiras!
Exemplos
Adicionar filetes em um elemento div:
div
{
border:2px solid;
border-radius:25px;
}
{
border:2px solid;
border-radius:25px;
}
tente »
sombras caixa de CSS3
A propriedade CSS3 box-shadow é usado para adicionar uma sombra:
imagens de fronteira CSS3
Com a propriedade-imagem Beira CSS3, você pode usar uma imagem para criar uma borda:
propriedade border-image permite especificar uma imagem como uma borda! Utiliza-se para criar a borda acima da imagem original:
Use imagens para criar div border:
Exemplos
Use imagens para criar uma div fronteira
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
tente »
Novas propriedades de fronteira
| propriedade | explicação | CSS |
|---|---|---|
| border-image | Definir as propriedades de taquigrafia fronteira de todas as imagens. | 3 |
| border-radius | Um para definir todos os quatro fronteira - * - propriedade raio de taquigrafia | 3 |
| box-shadow | Anexar uma ou mais caixa sombras drop-down | 3 |