web-dev-qa-db-ja.com

CSSで境界線に画像を使用する方法

視覚的な補助として、リンクへのポインタを提供する画像を使用したい下部を除いて、テーブルの境界線を「1px黒一色」に設定したいと思います。

他の境界線が通常のCSSである場合、画像を下の境界線として設定することは可能ですか？.

cssimageborder
12
Ankur

テーブルを<div class="myTableContainer"></div>内に配置してから、次のようにします。

.myTableContainer{
  padding-bottom: 1px;
  background: url(myBorderImage.png) bottom left;
}

これは、すべてのブラウザでうまく機能するはずです。

14
warpech

CSS3はborder-imageのサポートを追加しました。詳細については、 http://www.w3.org/TR/css3-background/#border-images を参照してください。この時点（2012年初頭）では、IEのすべてのバージョンでサポートが不足しているため、おそらく安全に使用できません。安全に使用できる時期を追跡するには、 http://caniuse.com/#search=border-image にアクセスしてください。境界線画像スタイルをシミュレートする1​​つの方法は、配置された背景画像を使用することです。たとえば、上部の境界線をシミュレートするには、次のようにします。

div
{
  background-image: url('topBorder.gif');
  background-position: top;
  background-repeat: repeat-x;
}
5
Brian Hasden

現在、CSS3とそのためのborder-imageプロパティがありますが、それでもすべてのブラウザーで機能するわけではありません。

OK、このトピックに W3Schoolsリンク があるようにしましょう。

2
F0G

そうは思いません。テーブルの下に<DIV>を追加し、黒い境界線、固定の背景、固定のパディングなどを追加することをお勧めします（サイズを指定するため）。

2
exclsr

1つの解決策は、cssの背景画像で要素のスタイルを設定してから、CSSで背景のオフセットを指定することです。背景は、要素のエッジを超えて突き出すことができます（たとえば、divまたはli要素）。これは、純粋なcssを使用したドロップシャドウの外観など、さまざまな効果に使用できます。

ここにいくつかの詳細：

http://www.alistapart.com/articles/cssdropshadows/

2
Gordon Potter

いいえ。その目的で別のテーブル行を試してみませんか？

1
usoban

テーブルの下に置いて、彼のスタイルを次のように設定してみてください

.bottomborder {
  height:1px;
  background-image:url("yourImage.png");
}

うまくいくはずです。

編集：そしてもちろん、テーブルの上部、左側、右側の境界線「1px黒一色」

1
Clement Herreman

下の境界線を除いて、そのように境界線を設定できます。

border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;

下の境界線については、画像を行の背景として設定できます。

0
Canavar