为Modal添加外部渐变时左下角出现间隙的技术求助

我想给Modal添加偏移的渐变边框效果，目前实现后左下角出现了不该有的小间隙，本该是弧形过渡的位置出现了缺口。

原实现CSS代码：

.dialog {
    --s: 1px;
    --x: -10px;
    --y: 10px;
    border-radius: 12px;
}

.dialog::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--s));
    transform: translate3d(var(--x), var(--y), -1px);
    clip-path: polygon(-100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)));
    border-radius: 12px;
    background: linear-gradient(90deg, #74469b 0%, #05aaaa 100%);
}

问题原因 #

原代码用clip-path: polygon()挖空中间区域，但多边形路径是直角的，无法匹配Modal的圆角弧度，导致左下角圆角位置出现间隙。

修复方案 #

改用CSS Mask来实现挖空效果，Mask可以完美保留圆角，不会出现间隙：

.dialog {
    --s: 1px;
    --x: -10px;
    --y: 10px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    /* 添加Modal自身背景色，避免渐变层透过来 */
    background: #ffffff;
}

.dialog::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--s));
    transform: translate3d(var(--x), var(--y), -1px);
    border-radius: 12px;
    background: linear-gradient(90deg, #74469b 0%, #05aaaa 100%);
    /* 使用Mask实现中间挖空 */
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: var(--s);
}

说明 #

1. 给.dialog添加position: relative和z-index，确保渐变层在Modal下方
2. 用mask的组合效果，把中间内容区域挖空，只保留外层的渐变边框
3. padding: var(--s)用来控制渐变边框的厚度，和原代码的--s变量对应

内容的提问来源于stack exchange，提问作者atul mishra