web-dev-qa-db-ja.com

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

Htmlとcssでナビゲーションメニューを作成していますが、各ナビゲーションアイテムの右側の境界線を画像にしたいです。

私は試した

border-right:url(image.jpg);

しかし、これはうまくいきませんでした。

どうすればいいのですか？

htmlcssimageborder
11
RSM

背景画像を使用してから、各要素の右側に背景画像を配置できます。通常、これは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;
}
16
Dylan Valade

カスタムボーダーサイズを設定できます。上、左、下は0pxになり、境界線の画像を設定します。これらの境界線を他のスタイルで装飾したい場合は、サブディビジョンを使用してください。

右の画像で装飾された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;
7
user586295

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

通常、バックグラウンドプロパティを1行でコーディングすることをお勧めします。

1
Christopher Marshall

これは実際にはCSS3の新機能であり、プロパティは border-image と呼ばれます。残念ながら、それはまだ推奨候補であるため、今日のブラウザでは まだ広くサポートされていません です。

1
Marco Miltenburg

border-imageと呼ばれるcssプロパティがあります。これはあなたが求めているものかもしれません。それに対する現在のブラウザサポートが何であるかはわかりませんが...

0
Gareth

実際にこのようにすることはお勧めしません。詳細については、このスレッドを参照してください： border-imageを設定するにはどうすればよいですか？

0
lc2817