2010-03-13 9 views
4

J'ai une image de taille 4x4 et je veux l'utiliser tout autour de la frontière d'une DIV. Les éléments suivants:Comment CSS 3 border-image fonctionne-t-il exactement?

-moz-border-image: url("../images/window/side.png") 4 4 4 4/4px 4px 4px 4px repeat repeat 

placera les bordures gauche et droite, mais pas le bas et le haut. Qu'est ce qui ne va pas avec ça? Je pense que j'ai mal compris la syntaxe et si tel est le cas, comment fonctionne cette syntaxe?

Répondre

3

Si vous voulez que l'image 4x4 soit carrelée le long de la bordure, vous devez créer une nouvelle image, 12x12, qui ressemble à une boîte carrée avec la bordure déjà en mosaïque. Semblable à celui-ci où chaque diamant serait votre image 4x4:

alt text

alors vous suffit d'utiliser ce CSS:

border-image: url("border.png") 4 repeat; 

Les exemples dans le official spec peut le rendre un peu plus clair.

0

Avez-vous essayé
-moz-border-image: url("../images/window/side.png") 4/4px repeat;
ou
-moz-border-image: url("../images/window/side.png") 4 repeat;
avec border-width:4px;
?