CSS渐变方形背景从黑色到透明度

时间:2015-07-06 14:02:34

标签: html css css3

我们有一个必须是半透明和半黑色的div,另外它必须以方形渐变的方式对所有边进行100%透明。

换句话说:在中心中,它是50%黑色和50%不透明度块(例如:400px width200px height)和在这个区块周围,黑色对所有边都是100%的透明度。

任何帮助表示赞赏!

1 个答案:

答案 0 :(得分:2)

这是一个50%的不透明度div,在边缘处渐变为0%不透明度。 希望有所帮助。



.box {
    width: 400px;
    height: 200px;
    position: relative;
    background: rgba(0,0,0,0);
}

.box .content {
    position: relative;
    z-index: 1;
}

.box::before {
    content: "";
    top: 50px; right: 50px; bottom: 50px; left: 50px;
    position: absolute;
    display: block;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 2em 2em rgba(0,0,0,0.5);
}

<div class="box">
    <div class="content"></div>
</div>
&#13;
&#13;
&#13;