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

Question

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

Answer 1

在上面叠加一层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>