div要素のそれぞれの側を下にボーダーのように見えるCSSを使用してバックグラウンドイメージを追加する方法

Question

Basiclyは、私は、カスタムの境界線を作成したい私のコンテンツのdivの左側と右側ダウン。私は半分は働くものを作成するために管理しています。問題私は、コンテンツのdivに揃っているとの国境ではなく、フローティングラインのように見えるので、divを揃え、それを取得しています。私が何をしたいの攻撃画像を参照してください。説明するのは難しいです。

乾杯

うまくいけば、私はいくつかのローミングサービスを行っています。

http://www.webquark.co.uk/shadowed-borders .JPGする

Answer 1

基本的な技術は、「のどの列」と呼ばれ、同じ名前での記事で説明されていますに。記事は、フローティングサイドバー用の「隠蔽」するために使用する方法について説明し、それはあなたが達成したいものに同じ基本原理です。

Answer 2

あなたは2つのドロップシャドウをカバーするワイド1つのピクセルの高さのビットマップを作成し、あなたの最も外側のdivの背景としてそれを置く（またはあなたが体内に入れることができます）必要があります。それを中央とbackground-repeatにrepeat-yを設定します。

この技術は、例えばこのサイトの上で使用されています。それは、このCSSを使用します：

body { 
  background-attachment: scroll;
  background-repeat: repeat-y;
  background-position: 50% 0px;
  background-color: #e8b36d;
  background-image: url("images/bg_center_orange.gif");
}

Answer 3

あなたのラップのdivと同じ幅PNGを作成し、ラップの背景として設定します：

CSSます：

div#wrap {
    background: url('drop-shadow.png') repeat-y;
    width: // the width of #wrap should be the same as the width of the background image
}

HTMLます：

<div id="wrap">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

コンテンツは、あなたのドロップシャドウをカバーしていないことように

あなたはおそらく、内側のdivにいくつかのマージンやパディングをお勧めします。