1

基本的に、コンテンツ div の左右にカスタム ボーダーを作成したいと考えています。半分は機能するものを作成することができました。問題は、コンテンツ div にフラッシュされ、フローティング ラインではなく境界線のように見えるように div を整列させることです。説明するのが難しいので、私が欲しいものの攻撃画像を見てください。

乾杯

うまくいけば、私はいくつかの意味を成しました。

代替テキスト http://www.webquark.co.uk/shadowed-borders.jpg

4

3 に答える 3

2

基本的なテクニックは「フェイクコラム」と呼ばれ、同名の記事で解説されています。この記事では、フローティング サイドバーを「隠す」方法について説明していますが、達成したいことと同じ基本原理です。

于 2009-06-07T01:10:23.897 に答える
0

ラップ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にマージンまたはパディングが必要になる場合があります。

于 2009-06-06T21:00:27.347 に答える
0

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");
}
于 2009-06-06T20:51:23.997 に答える