如何創建看起來像曲線的盒子陰影效果？

Question

我很熟悉創建基本的盒子陰影，但我無法理解如何創建看起來像曲線的東西。爲了更好地解釋我在找什麼，我附上了圖片。我需要類似的東西。我如何創建它？

Answer 1

我試圖實現以某種方式與使用絕對定位的元素，框陰影和徑向漸變。但總的來說，我會使用背景圖片。

但仍然看看my fiddle，這不幸看起來不像你的目標。但它可能會給你一個起點。

HTML

<div id="wrapper"> 
    <ul id="nav"> 
    </ul> 
    <div id="first"></div> 
    <div id="second"></div> 
</div> 

CSS

body { 
    background: #FEFEFE; 
} 

#wrapper { 
    position: relative; 
    display: block; 
    width: 960px; 
    height: 80px; 
    overflow: hidden; 
} 
ul { 
    height: 40px; 
    width: 100%; 
    background: #FFF; 
    box-shadow: 0px 3px 5px 0px #ccc; 
    position: absolute; 
    z-index: 300; 
    display: block; 
    padding: 0; 
    margin: 0; 
    border: solid 2px #EEE; 
    border-bottom: solid 1px #FEFEFE; 
} 

#first { 
    position: absolute; 
    background: none; 
    width: 800px; 
    height: 50px; 
    box-shadow: 0px 10px 50px 5px #000; 
    margin-left: -400px; 
    top:-20px; 
    left: 50%; 
    z-index: 100; 
} 

#second { 
    left: 50%; 
    position: absolute; 
    width: 900px; 
    z-index: 200; 
    margin-left: -450px; 
    height:80px; 
    top: 15px; 
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.28) 79%,rgba(255,255,255,0) 100%); /* W3C */ 
}