Imagens CSS3 Fronteira
Com o CSS3 border-image propriedade, você pode definir uma imagem para ser usada como a borda em torno de um elemento.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz- , ou -o- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image Property
O CSS3 border-image propriedade permite especificar uma imagem a ser usada em vez da borda normal em torno de um elemento.
A propriedade tem três partes:
- A imagem para usar como a fronteira
- Onde cortar a imagem
- Defina se as seções do meio deve ser repetido ou esticado
Usaremos a seguinte imagem (chamado "/css/border.png"):
O border-image propriedade leva a imagem e fatias-lo em nove seções, como uma placa de tic-tac-toe. Em seguida, ele coloca os cantos nos cantos, e as seções médias são repetidas ou esticado como você especificar.
Nota: Para border-image para o trabalho, o elemento também precisa da border conjunto de propriedades!
Aqui, as seções meio da imagem são repetidos para criar a fronteira:
Uma imagem como uma borda!
Aqui está o código:
Exemplo
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Tente você mesmo " Aqui, as seções meio da imagem são esticados para criar a fronteira:
Uma imagem como uma borda!
Aqui está o código:
Exemplo
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Tente você mesmo "  | Dica: o border-image propriedade é na verdade um atalho para o border-image-source , border-image-slice , border-image-width , border-image-outset e border-image-repeat propriedades. |
|---|
CSS3 border-image - Diferentes Valores Fatia
valores fatia diferente muda completamente o visual da fronteira:
Exemplo 1:
border-image: url(border.png) 50 rodada;
Exemplo 2:
border-image: url(border.png) redonda de 20%;
Exemplo 3:
border-image: url(border.png) rodada 30%;
Aqui está o código:
Exemplo
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} Tente você mesmo " Teste-se com exercícios!
Propriedades da borda CSS3
| Propriedade | Descrição |
|---|---|
| border-image | Um atalho para definir todas as border-image-* propriedades |
| border-image-source | Especifica o caminho para a imagem a ser usado como uma borda |
| border-image-slice | Especifica como cortar a imagem Beira |
| border-image-width | Especifica as larguras da imagem fronteira |
| border-image-outset | Especifica a quantidade pela qual a área da imagem fronteira se estende para além da caixa de fronteira |
| border-image-repeat | Especifica se a imagem de fronteira deve ser repetido, arredondado ou esticado |