如何为模态框创建平滑的CSS镂空效果？

你当前的代码通过径向渐变实现了顶部圆形镂空遮罩，但因为透明与黑色的过渡区间仅1px，导致边缘生硬不够平滑。以下是几种改进方案：

方案一：扩大过渡区间 #

将透明到黑色的渐变范围拉开，让过渡更自然，同时补充标准mask-image属性以兼容更多浏览器：

-webkit-mask-image: radial-gradient(
    circle at top,
    transparent 30px,
    black 35px
) !important;
mask-image: radial-gradient(
    circle at top,
    transparent 30px,
    black 35px
) !important;

你可以根据需求调整35px的数值，数值越大过渡越柔和。

方案二：添加半透明过渡色 #

在透明和黑色之间加入半透明的中间色，进一步柔化边缘：

-webkit-mask-image: radial-gradient(
    circle at top,
    transparent 30px,
    rgba(0, 0, 0, 0.5) 32px,
    black 35px
) !important;
mask-image: radial-gradient(
    circle at top,
    transparent 30px,
    rgba(0, 0, 0, 0.5) 32px,
    black 35px
) !important;

这种方式能让边缘的过渡更细腻，避免硬边感。

方案三：组合遮罩实现模糊边缘效果 #

通过叠加两个径向渐变遮罩，利用遮罩合成来实现类似模糊的柔化边缘：

.element {
    -webkit-mask-image: 
        radial-gradient(circle at top, transparent 30px, black 30px),
        radial-gradient(circle at top, transparent 28px, black 33px);
    -webkit-mask-composite: source-in;
    mask-image: 
        radial-gradient(circle at top, transparent 30px, black 30px),
        radial-gradient(circle at top, transparent 28px, black 33px);
    mask-composite: intersect;
}

第一个遮罩定义基础镂空形状，第二个遮罩提供模糊过渡范围，通过合成实现平滑边缘。注意不同浏览器的遮罩合成关键字有差异，-webkit-mask-composite使用source-in，标准mask-composite使用intersect。

内容的提问来源于stack exchange，提问作者Ogurinka Benjamin