0

古いブラウザにボーダー画像を実装する方法は?
私は 8 つの画像を持っています:
4 つのボーダー画像 (border-top.gif、border-right.gif、border-bottom.gif、border-right.gif)
と 4 つのボーダー コナー (コナーの外側部分は透明です。重要です): border-top-left.gif、border-top-right.gif、border-bottom-right.gif、border-bottom-left.gif、次のマークアップもあります。

<div class"block">
  <div class="content">A lot of text with images and tables</div>
  <div class="border-top"></div>
  <div class="border-right"></div>
  <div class="border-bottom"></div>
  <div class="border-left"></div>
  <div class="border-top-left"></div>
  <div class="border-top-right"></div>
  <div class="border-bottom-right"></div>
  <div class="border-bottom-left"></div>
</div>

CSS ソリューションはありますか? 必要に応じて、クラスをマークアップに追加できます。
UPD:テーブルで簡単にできることはわかっていますが、divの解決策を見つけたいです。
UPD2: グラデーション付きの画像なので、画像なしで行う方法はありません。

4

2 に答える 2

1
  • コンテナの相対位置 ( .block )

  • コンテナ内のコーナー div 要素の絶対配置。

    <style type="text/css">
  .block { display:block;position:relative; }
  .border-top-left { 
          display:block;
          background-image:url(/folder/topleftcorner.png); 
          background-repeat:no-repeat;
          width:10px; height:10px; /* size of your corner graphic above */

          /* this puts it where you want it */
          position:absolute;
          top:0;
          left:0;

         }
</style>

から使用...

        right:0; bottom:0

残りを合わせて合わせる

于 2012-05-18T17:48:52.410 に答える
0

CSS スプライトを使用することをお勧めします。これにより、画像のスライスに時間を費やす必要がなくなります。CSS の background-position 宣言に任せてください。

参照: http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

于 2012-05-18T17:44:38.740 に答える