Можете ли вы присвоить изображение границе справа?

Я делаю навигационное меню в html и css, но я хочу, чтобы граница права каждого навигационного элемента была изображением.

Я пробовал

border-right:url(image.jpg);

Но это не сработало.

Как мне это сделать?

ОТВЕТЫ

Ответ 1

Вы можете использовать фоновое изображение, а затем поместить фоновое изображение справа от каждого элемента. Обычно это будет проходить либо тег a, либо li. Например:

#primaryNav a:link { 
 background-image: url('image.jpg');
 background-position: right;
 background-repeat: no-repeat;
 display: block; /* make the link background clickable */
}

Если вы не хотите, чтобы граница применялась к последнему (при использовании background-position: right;) или первому (для background-position: left;) элементу в вашем меню, попробуйте селектора :last-child и :first-child.

#primaryNav a:last-child {
   background: none;
}

Ответ 2

Вы можете установить собственный размер границы. Верх, левый и нижний будут 0px и установите пограничное изображение. Если вы хотите украсить эти границы другим стилем, используйте sub div.

Правое изображение, украшенное стилем div:

border-style: solid;
border-width: 0px 15px 0px 0px;
-moz-border-image: url(border.png) 27 repeat;
-webkit-border-image: url(border.png) 27 repeat;
-o-border-image: url(border.png) 27 repeat;
border-image: url(border.png) 27 fill repeat;

Ответ 4

#primaryNav a:link { background: url('image.jpg') no-repeat right;
display: block; }

Обычно рекомендуется кодировать свойство фона в одной строке.

Ответ 5

Здесь есть свойство css border-image, которое может быть тем, что вам нужно. Я не уверен, что поддерживает текущий браузер для него...