12

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

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

4

8 に答える 8

14

テーブルを中に入れてみてください<div class="myTableContainer"></div>。

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

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

于 2009-07-13T09:03:59.657 に答える
5

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;
}
于 2012-01-21T13:04:33.887 に答える
2

私はそうは思わない。おそらく、表の下に <DIV> を追加して、黒の境界線、固定の背景、および固定のパディングなどを (サイズを指定するために) 追加した方がよいでしょう。

于 2009-07-13T09:03:24.260 に答える
2

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

ここにいくつかの詳細があります：

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

于 2009-07-13T09:09:27.993 に答える
2

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

OK、このトピックに関するW3Schools リンクを作成しましょう。

于 2013-01-23T11:59:58.970 に答える
1

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

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

うまくいくはずです。

編集：もちろん、テーブルのボーダートップ、左、右は「1pxの黒一色」です

于 2009-07-13T09:18:15.790 に答える
1

いいえ、その目的で別の表の行を試してみませんか?

于 2009-07-13T09:03:31.983 に答える
0

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

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

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

于 2009-07-13T09:03:31.513 に答える