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

Question

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

换句话说：在中心中，它是50%黑色和50%不透明度块（例如：400px width和200px height）和在这个区块周围，黑色对所有边都是100％的透明度。

任何帮助表示赞赏！

Answer 1

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

<div class="box">
    <div class="content"></div>
</div>

＆＃13;

＆＃13;

＆＃13;