O css3 não abre a imagem no firefox

conhecer · 9 de setembro de 2016

O código é esse,

#borda{
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(pasta/imagem.png) 30 round;
    -o-border-image: url(pasta/imagem.png) 30 round;
    border-image: url(pasta/imagem.png) 30 round;
}
</style>

FabianoS · 10 de setembro de 2016

-moz-border-image: url(pasta/imagem.png) 30 round;

conhecer · 10 de setembro de 2016

O problema ainda persiste não abre também no Chrome e safari

FabianoS · 10 de setembro de 2016

2 horas atrás, conhecer disse:

O problema ainda persiste não abre também no Chrome e safari

Então pode ser 2 coisas, 1° você pode estar definindo o tamanho da imagem errado ou 2° o diretório da imagem esta errado.

verifique se a imagem está no local certo.

https://jsfiddle.net/7jfct7t9/

DiF · 10 de setembro de 2016

Testado aqui... funcionou corretamente apenas com o atributo border-image no mozilla firefox!

conhecer · 10 de setembro de 2016

Funcionou assim

<html>
<head>
<style> 
#borda { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(imagem.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(imagem.png) 30 round; /* Opera 11-12.1 */
    border-image: url(imagem.png) 30 round;
}
</style>
</head>
<body>

<p>The border-image property specifies an image to be used as the border around an element:</p>
<p id="borda">Here, the middle sections of the image are repeated to create the border.</p>

<p>Here is the original image:</p><img src="imagem.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

Porém eu gostaria de fazer tudo em arquivos separados, o html em uma pasta e o css em outra

FabianoS · 10 de setembro de 2016

@conhecer Então o erro esta como falei. no diretório da imagem.

Se o CSS esta em outra pagina. você precisa definir a imagem ate o local.

|CSS -------style.css

SITE ---------- |imagem.png

|index.html

Se tiver anterior você usa.

"../pasta/imagem.png" os ".." sigifica que esta voltando a uma pasta no diretório.

Pelo que vi provavelmente a imagem esta na raiz junto com html e o css esta em uma pasta.

no css você define assim.

#borda { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../imagem.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(../imagem.png) 30 round; /* Opera 11-12.1 */
    border-image: url(../imagem.png) 30 round;
}