请问如何用css3实现如图中的口袋效果阴影

Question

求前端大神不吝赐教

Answer 1

实现了一个，看看是否符合要求。

html:

    <div class="content">
         打酱油
        <div class="wrap">
                <div class="mask"></div>
        </div> 
    </div>
 

css:

*{  
    margin:0;  
    padding: 0;  
}  
  
body{
    background: #47B5AC;
}

.wrap {
      width:700px;
    height: 20px;  
    background-color: #47B5AC;  
       position: relative;
      top:180px;
      left:-100px;
       z-index:99999;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.wrap:before, .wrap:after {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px;
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
}

.wrap .mask{
    width:706px;
    height:40px;
    position:absolute;
    background:#47B5AC;
    bottom:-20px;
    left:-3px;
}
 .content{
    width:500px;
    height:200px;
    background:#FFF;
    top:-204px;
    left:100px;
    margin:0px auto;
}

演示地址：http://runjs.cn/detail/6jzqbb0e

Answer 2

box-shadow

Answer 3

box-shadow主要的问题在于四边都会产生阴影，需要通过遮罩层定位改掉三遍。

我使用border-radius试了一个，效果如下：

https://jsfiddle.net/p0j75geo/1/

但是阴影上觉得有些问题

        div {
            margin: 100px auto;
            width: 600px;
            height: 200px;
            position: relative;
            border-bottom: 3px solid rgba(0,0,0,.3);
            border-radius: 100px/6px;
        }

还有一种就是使用图片作border，这个最简单。