html - の一部だけに境界線をコーディングするにはどうすればよいですか?

Question

私はこのようなことを達成したい:

div の周囲の 1 ピクセルの境界線と、シャドウ効果を作成する側の一部の 2 ピクセルの境界線。これを達成するための最良の方法は何ですか？

Answer 1

を使用しない理由box-shadow:

.content {
    border: 1px solid #000;
    box-shadow: 2px 2px 0 2px #ccc;
}

JS フィドルのデモ。

Answer 2

これが私がそれを行う方法です。

div{
    border: 1px solid #000;
    -moz-box-shadow: 2px 2px 0 0 #000;
    -webkit-box-shadow: 2px 2px 0 0 #000;
    box-shadow: 2px 2px 0 0 #000;
}

これにより、探している境界線と、ボックスの影が右下に移動することができます。

JSフィドル

Answer 3

これを実現する最善の方法は、2 つの div を使用することです。1 つは境界線が全体的に黒に設定され、2 つ目の div は部分的に境界線で囲まれています

いいね デモ

内側の div:border:solid 1px #000;

外側の div:border:solid 5px #BBB; border-top:none; border-left:none;

互換性のため、box-shadowは古いブラウザでは動作しません