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