中心容器上的阴影;下面的色带

Question

我正在设计我的投资组合网站，我正在尝试找出使用CSS创建以下效果的最佳方法。我想要一个带有盒子阴影的中心容器，然后用颜色条在视觉上分离出不同的部分。

我不确定实现此目的的最佳方法是什么，因为您无法创建仅从左侧和右侧延伸的盒子阴影。目前，我有以下内容：

    <div id="content"> // the container with the shadow </div>
    <div id="header"> // the brown section </div>

---

#content {
    width:960px;
    margin:auto auto;
    box-shadow:0px 0px 50px 5px #999;
}

#header {
    position:absolute;
    top:0;
    z-index:-99;
    width:100%;
    height:550px;
    background:#cbbbae; 
}

---

这“有效”，但我不想依赖于绝对定位。理想情况下，每个部分都是它自己的div容器，我只想改变背景颜色。

也许有一个明显的解决方案，我错过了，但这就是我在这里的原因。

Answer 1

尚未测试它是否适用于旧版本的浏览器（在当前版本的Chrome，FF和Safari中可行），您可以使用负边距和溢出隐藏（可能您需要使用填充进行一些调整才能获得它到处工作）：

<强> CSS

.inner {
    margin: auto;
    width: 100px;
    margin-top: -5px;
    margin-bottom: -5px;
    padding-top: 5px;
    padding-bottom:5px;
    box-shadow: black 0px 0px 10px;
}
.outer {
    overflow: hidden;
    background-color: rgb(255,255,200);
}

.outer2 {
    overflow: hidden;
    background-color: rgb(200,200,255);
}

<强> HTML

<div class="outer">
    <div class="inner">test</div>
</div>
<div class="outer2">
    <div class="inner">test</div>
</div>

Answer 2

我想到的是有一个覆盖整个页面的div，所以充当你的身体，而不是应用渐变来实现3种不同的颜色。在这样的div中有另一个div垂直延伸到整个页面，并给它一个盒子阴影。

以下是实例：Example

<强> HTML

<div class="container">
    <div class="page-wrap"></div>
</div>

<强> CSS

.page-wrap {
    margin: 0 20%;
    width: 60%;
    height: 100%;
    position: absolute;
    box-shadow: 0 0 5px 2px #424242;
}

.container {

    width: 100%;
    height: 100%;
    position: absolute;
    background: #cbbcaf;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbbcaf), color-stop(0.15, #cbbcaf), color-stop(0.15, #ffffff), color-stop(0.51, #ffffff), color-stop(0.85, #ffffff), color-stop(0.85, #90c8fc), to(#90c8fc));
    background: -webkit-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: -moz-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: -o-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbbcaf', endColorstr='#90c8fc',GradientType=0 );

}

注意，您可以调整渐变中的百分比，以达到满足您需求的不同颜色的高度。但是，如果你不想这样做，你需要使用绝对定位。