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

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

enter image description here

我不知道最好的方法是做到这一点，因为你无法创建的box-shadow，只有从左边和右边延伸的东西。目前，我有以下几点：

<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; 
}

enter image description here

这个 “作品”，但我不希望依靠绝对定位。理想情况下，每个部分将是它自己的div容器，并且我只是更改背景颜色。

也许有说我缺少一个明显的解决方案，但是这就是为什么我在这里。

来源

2013-03-17 Jon

还没有测试它是否工作与旧版本的跨浏览器（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>

来源

2013-03-17 22:37:23

东西我认为是有覆盖整个页面一个div，所以作为你的身体，比应用梯度它来实现3种不同颜色。在这个div里面有另一个div，它垂直延伸到整个页面，并给它一个box shadow。

这里是活生生的例子：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); 

}

注意，你可以在梯度，以实现不同颜色的高度调整比例之和满足您的需求。但是，如果你不想这样做，你需要使用绝对定位。

来源

2013-03-17 21:36:15 Ilja

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

回答

相关问题