CSS3 propriedade border-image
Exemplos
Designada como uma borda em torno do elemento de imagem div:
div
{
-webkit-border-image: url (border.png) 30 30 rodada; / * Safari 5 * /
-o-border-image: url (border.png) 30 30 rodada; / * Opera * /
border-image: url (border.png) 30 30 rodada;
}
{
-webkit-border-image: url (border.png) 30 30 rodada; / * Safari 5 * /
-o-border-image: url (border.png) 30 30 rodada; / * Opera * /
border-image: url (border.png) 30 30 rodada;
}
tente »
Na parte inferior desta página para mais exemplos.
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.
propriedade | |||||
---|---|---|---|---|---|
border-image | 16,0 4.0 -webkit- | 11.0 | 15,0 3,5 -moz- | 6 3.1 -webkit- | 15,0 11,0 -o- |
Atributo definições e instruções
propriedade border-imagem é uma propriedade estenográfica usado para definir o border-image-Fonte , border-image-Slice , border-image-width , border-image-OUTSET e -border-image repeat valor.
configurações omitido aos seus valores padrão.
Dica: para construir belos botões escaláveis usando propriedades * border-image-!
padrão: | Nenhum 100% 1 0 estiramento |
---|---|
herança: | não |
versão: | CSS3 |
sintaxe JavaScript: | objeto .style.borderImage = "url (border.png)30 30 round" |
gramática
border-image:source slice width outset repeat;
值 | 描述 |
---|---|
border-image-source | 用于指定要用于绘制边框的图像的位置 |
border-image-slice | 图像边界向内偏移 |
border-image-width | 图像边界的宽度 |
border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
border-image-repeat | 这个例子演示了如何创建一个border-image 属性的按钮。 |
mais exemplos
Botão de imagem
Este exemplo demonstra como criar um botão atributo border-image.
artigos relacionados
tutorial CSS3: CSS3 Fronteiras