изображение границы css3

Question

У меня есть четыре отдельных изображения по 20 на 20 пикселей, я хочу показать каждое изображение на каждой стороне границы. какой-нибудь фрагмент кода? Моими целевыми платформами являются FF 3.6+ и Safari 5+.

Использование css3 и html5.

Answer 1

Не представляется возможным использовать более одного изображения для атрибута border-image.

Однако вы все равно можете использовать border-image, вам просто нужно создать изображение со всех четырех сторонв одном.

Посмотрите на пример здесь: http://www.w3.org/TR/css3-background/#border-images

border-image принимает URL-адрес изображения, а затем четыре размера, сколько нужно среза изображения для использования.Первое значение используется для верхнего левого угла, второе - для верхнего правого края и т. Д.С помощью

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

будет выделен верхний левый 20x20 пикселей для верхнего левого угла div, det верхний правый 20x20 для верхнего правого угла div и т. Д.

Answer 2

Вы можете использовать:

/* Shorthand */
border-image:url('top.png') url('right.png') url('bottom.png') url('left.png');

Или долгий путь:

/* Long way */
border-top-image:url('...');
border-right-image:url('...');
border-bottom-image:url('...');
border-left-image:url('...');