ボーダー右に画像を割り当てることはできますか？

Question

私はhtmlとcssでナビゲーションメニューを作っていますが、各ナビゲーションアイテムの境界線をイメージにしたいと考えています。

私は

border-right:url(image.jpg); 

を試してみました。しかし、これは動作しませんでした。

どうすればよいですか？

Answer 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 */ 
} 

は国境はその後:last-childと:first-childセレクタを試してみてください、あなたのメニューの最後（background-position: right;を使用している場合）または（background-position: left;用）の最初の要素に適用されます。

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

Answer 2

border-imageと呼ばれるCSSプロパティがあります。これはあなたの後になっている可能性があります。私は現在のブラウザのサポートが何であるか分かりません...

Answer 3

これは実際にはこのようにすることはお勧めしません。詳細については、このスレッドを参照してください：How do I set a border-image?

Answer 4

これは実際にCSS3の新機能で、プロパティはborder-imageと呼ばれています。残念ながら、現在のブラウザでは依然として候補として推奨されているため、not yet widely supportedです。

Answer 5

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

あなたの背景プロパティの単一ライン上をコーディングする一般的に良い練習。

Answer 6

カスタムボーダーサイズを設定できます。上、左、下は0pxになり、ボーダー画像を設定します。これらの罫線を他のスタイルで飾りたい場合は、sub 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; 

：

右の画像は、divのスタイルがあるdecoreted