3

#page div に、上部の灰色の境界線に沿った内側の境界線を付けようとしています: http://www.designated.net.au/testbed/testpage/

別の div を追加することもできますが、#page 内に他のコンテンツがあるため、それは私が探している解決策ではありません。これは可能ですか？

これは、次の質問の続きです: Border-box CSS が正しく機能しない

4

2 に答える 2

2

古いブラウザーで動作しないことを気にしない場合は、.box-shadow を使用できます。これは、余分なマークアップを追加することなく実行できます。:before または :after 擬似 css クラスも使用できますが、box-shadow の方がクリーンな IMO です。

-webkit-box-shadow(inset 0 0 1px #000);
   -moz-box-shadow(inset 0 0 1px #000);
     -o-box-shadow(inset 0 0 1px #000);
        box-shadow(inset 0 0 1px #000);
于 2012-09-08T05:47:20.200 に答える
1

既に使用している相対的な配置を利用して、画像を境界線に揃えることができます。

例: http://jsfiddle.net/zbrcb/

これらの定義を既存の定義とマージします。

#page {
 border: 10px solid #333;  
}

#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px;  }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }

Chrome、FF、Safari、IE 8/9 で動作します (おそらく 7 でも同様に動作する可能性があります。この変更がなくても IE7 ではヘッダーの位置がずれています)。

個人的には、サイトのトップを作成するために使用している要素の数を減らそうとしますが、公平を期すためにそれはうまく機能します.

于 2012-09-08T05:52:30.540 に答える