html - クロスブラウザの二重枠・内枠

Question

クロスブラウザで動作する次のような微妙な内部アウトラインを再作成する適切な方法は何ですか?

現在、外側の div と内側の div があり、どちらも異なる色の境界線を持っています。2 つではなく 1 つの div のみを使用するソリューションはありますか?

Answer 1

box-shadow未テスト: 、outline&の組み合わせを使用できますborder:

div{
    height:200px;
    width:200px;
    background:#F7F7F7;
    box-shadow:0 0 3px red inset;
    outline: solid 2px blue;
    border:solid 1px #F7F7F7;
}

プレビュー: http://codepen.io/anon/pen/vthAJ

Answer 2

jsFiddle Demo

このタイプのアプローチで私が通常行うことは、ボーダーとパディングを備えた div コンテナーを作成することです。そして、内側に境界線のある div を作成します。このようにして、コンテナーは外側の境界線と含まれる境界線の色を保持できます。そして、内側の div は内側の境界線の色を保持できます。

html

<div class="outer">
 <div class="inner">
    <div class="content">
        Just some text.<br>
        Could be other stuff,<hr>
        In here too.
    </div>
 </div>
</div>

CSS

body{
 background-color:#545454;
}
.outer{
 border: 2px solid black;
 padding: 3px;
 border-radius:4px;
 width:200px;
 height:200px;
 background-color:#858585;
}
.inner{
 background-color:#545454;
 width:196px;
 height:196px;
 border-radius:4px;
 border:2px solid black;
}
.content{
 color:white;
 padding:5px;
}

Answer 3

box-shadow: inset...スクリーンショットにはボーダー半径も含まれているため、CSS3 を使用でき、IE でバージョンを戻すことのみを検討している場合は、2 番目のボーダーを実現するために使用できる CSS3 メソッドがあります。

スクリーンショットの境界半径の側面を気にしない場合は、borderとの組み合わせを使用できますoutline。例については、フィドルを参照してください。

Answer 4

CSS3 ボーダー画像を使用してみることができます:

http://css-tricks.com/understanding-border-image/

これにより、1 つの div のみを使用できるようになります。シンプルで小さな繰り返し可能なサムネイルを作成するだけです。片面に 1 色、もう片面に別の色を配置するだけです。または、写真のようにグラデーションを作成します。あなたはおそらくドリルを知っています。

CSS3のborder-radiusと組み合わせれば角丸効果も得られると思います。

Answer 5

これはどう？フィドル

:afterボーダー付きの疑似要素を追加できます。

.double {
    position: relative;
    border: 2px solid silver;
}

.double:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid black;
}