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

图片说明
大概的效果图类似这样,求大神给个解题思路

2个回答

在上面叠加一层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>
qq_41833439
技术小新Nora 谢谢!感谢!
一年多之前 回复

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%)
}

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问