中心容器上的陰影;下面的顏色條

我正在設計我的投資組合網站，我試圖找出使用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

中心容器上的陰影;下面的顏色條

回答

相關問題