CSS3-可以用css实现中间高亮 两边渐变透明的效果吗

大概的效果图类似这样，求大神给个解题思路

在上面叠加一层div，大小完全覆盖

核心样式 background:linear-gradient(rgba(0,0,0,1), rgba(00,0,0), rgba(0,0,0,1));

<style>
.box{background:#000;color:#fff;height:400px;width:100%;position:relative;}
.mask {
    height: 400px;
    width:100%;
    position:absolute;
    left:0;
    top:0;
    background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,1));
}
</style>
<div class=box>
    11111111<br>
    11111<br>
    11111<br>
    11111<br>
    11111<br>
    1111111111<br>
    11111<br>
    1111111111<br>
    11111<br>
    1111111111<br>
    11111<br>
    1111111111<br>
    11111<br>
    1111111111<br>
    11111<br>
    11111<br>
    11111
    <div class="mask"></div>
</div>

background: linear-gradient(
to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10%,
rgba(35,198,200,0.3) 20%,
rgba(35,198,200,0.4) 30%,
rgba(35,198,200,0.5) 40%,
rgba(35,198,200,0.8) 50%,
rgba(35,198,200,0.5) 60%,
rgba(35,198,200,0.4) 70%,
rgba(35,198,200,0.3) 80%,
rgba(0,0,0,0) 90%,
rgba(0,0,0,0) 100%)
}