0

私が構築しているサイトでは、本文に 3 色の境界線の例が必要です。

これを作成する最も簡単な方法は何ですか?

次のことを試しましたが、期待どおりに機能しませんでした。

<div id="red">
    <div id="white">
        <div id="blue">

            <!--SITE GOES HERE-->

        </div>
    </div>
</div>

#red {
    width: 100%;
    height: 100%;
    padding: 16px;
    background: #CC092F;
}

#white {
    width: 100%;
    height: 100%;
    padding: 16px;
    background: white;
    position: absolute;
    z-index: 2;
}

#blue{
    width: 100%;
    height: 100%;
    padding: 16px;
    background: #0C144E;
    position: absolute;
    z-index: 3;
}

それに関する問題は、パディングが div を画面外に押し出すことです。私は間違った方法でそれを行っていることに気付きました... (パーセンテージ、つまり 98% を使用すると、明らかにスケーリングしますが、これは望ましくありません)。別。前もって感謝します。

4

3 に答える 3

2

これを試してください（フィドルを参照）：

<div id="red" class="site-border">
    <div id="white" class="site-border">
        <div id="blue" class="site-border">
            <div id="content"></div>
        </div>
    </div>
</div>

    * {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    height: 500px;
    background: #e3e3e3;
    padding: 16px;
}
.site-border {
    width:100%;
}
#red {
    border: 16px solid #CC092F;
}
#white {
    border: 16px solid #fff;
}
#blue {
    border: 16px solid #0C144E;
}
于 2013-08-21T10:31:14.403 に答える
1

このCSSを試すことができます：

div {
  width: 100px;
  height: 200px;
  border: 3px solid navy;
  outline: 3px solid #fff;
  box-shadow: 0 0 0px 6px darkred;
}

フィドル: http://jsfiddle.net/BXFUk/2/

于 2013-08-21T10:30:01.643 に答える