css - 余白を残して、要素に境界線を挿入することは可能ですか?

Question

いくつかの div に上部境界線を設定したいのですが、この境界線を要素に少し挿入し、上部の数ピクセルをそのままにして、そこに div コンテンツが表示されるようにします。

これを行う方法はありますか？私は js または jQuery ソリューションを探していません。

下の図では、茶色の部分を div にして、4px のオレンジ色の境界線を挿入するか、オレンジ色と茶色の 2 つの境界線を付けたいと思います。要素のすぐ上にある必要があります。

Answer 1

厳密にはボーダーではありませんが、CSS3 box-shadowをボックスの内側に描画し、元の色のボーダーを外側に配置できます。

#my_div { 
    width: 200px;
    height: 100px;
    background: brown;
    padding: 10px;
    color: orange;
    border-top: 10px brown solid; 
    box-shadow: inset 0 5px  orange;
}

jsfiddle

Answer 2

ボックスモデルの標準のため、あなたが求めていることは単一の要素では実行できませんが、2つの要素で行うのは簡単です。

<div class="outer">
    <div class="inner">
        What can I design fo
    </div>
</div>

.outer上にパディングを与えるだけで.inner、境界線を処理できます。

http://jsfiddle.net/ExplosionPIlls/NGbeB/

Answer 3

境界線が特定の側面だけでなく、要素全体に及ぶことを意図している場合は、この目的のためにアウトラインを使用できます。

http://tinker.io/95978

h1 {
    background: #CCC;
    outline: 2px solid;
    outline-offset: -8px;
    padding: 10px;
}

<h1>I like borders</h1>

ただし、outline-offset プロパティは IE のどのバージョンでもサポートされていません。

疑似要素を使用して境界線を保持することもできます。これにより、境界線を特定の側にのみ指定できます。

http://tinker.io/95978/1

h1 {
    position: relative;
    background: #CCC;
    padding: 10px;
}

h1:before {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    border: 2px solid;
    content: ' ';
    display: block;
}

IE8+ およびその他のほぼすべてのブラウザーで動作するはずです。