是否有css淡化div的边缘？

Question

我想创建一个模式弹出窗口（用于移动设备），它将显示成功消息。

我目前正在使用

为整个内容添加不透明的背面叠加层

.overlay {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.4);
}

但我想知道是否有办法只淡化/覆盖屏幕的边缘？像这样反过来：

Answer 1

使用CSS3有几种方法可以做这种褪色的风格。但最好同时应用Gradient Border和Inset Box Shadow的组合。您可以对此Codepen Example

有更好的了解