Как работает CSS 3 border-image?

Question

У меня есть изображение размером 4х4, и я хочу использовать его вокруг границы DIV. Следующее:

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

разместит левую и правую границы, но не снизу и сверху. Что с этим не так? Я думаю, что неправильно понял синтаксис, и если это так, как этот синтаксис действительно работает?

Answer 1

Если вы хотите, чтобы изображение 4x4 было выложено плиткой вдоль границы, вам нужно создать новое изображение 12x12, которое будет выглядеть как квадратная коробка с границей, уже выложенной плиткой. Аналогично этому, где каждый бриллиант будет вашим изображением 4х4:

_{(источник: www.w3.org )}

Тогда вы просто используете этот CSS:

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

Примеры в официальной спецификации могут сделать его немного понятнее.

Answer 2

ты пробовал
-moz-border-image: url("../images/window/side.png") 4 / 4px repeat;
или
-moz-border-image: url("../images/window/side.png") 4 repeat;
с border-width:4px;