css - 曲線のように見えるボックス シャドウ効果を作成するにはどうすればよいですか?

Question

基本的なボックス シャドウの作成には慣れていますが、曲線のようなものを作成する方法がわかりません。私が探しているものをよりよく説明するために、画像を添付しました。それに似たものが必要です。どうすれば作成できますか?

Answer 1

絶対配置要素、ボックス シャドウ、放射状グラデーションを使用して、何とかそれを達成しようとしました。しかし、全体的には背景画像を使用します。

しかし、残念ながらあなたの目標のようには見えない私のフィドルを見てください。しかし、それはあなたに出発点を与えるかもしれません。

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 */
}