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 中使用以下属性，而不是缩放，这样，边框和填充将计算在元素内部，而不是像普通盒子模型那样计算在外部。

* {
   margin: 0;
   padding: 0;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

另外，你不应该使用，position: absolute;因为我看不出有任何理由在这里使用它。

于 2013-08-21T10:25:17.543 回答
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 回答