Ir ao conteúdo
  • Cadastre-se
conhecer

O css3 não abre a imagem no firefox

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
-moz-border-image: url(pasta/imagem.png) 30 round;

 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites
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/

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×