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

Question

我们有一个div，它必须是半透明和半透明的，而且它必须以正方形梯度的形式对所有边进行100%透明。

换句话说：在中心，它是50%黑色和50%不透明度块(例如：400px width和200px height(，并且在该块周围，黑色逐渐变为所有侧面的100%透明度。

感谢您的帮助！

Answer 1

这是一个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>