如何在CSS、HTML、JS中为滚动触发的圆形遮罩添加蓝色粗边框？

你的问题核心是CSS mask会裁剪元素的border和box-shadow，导致边框无法显示在遮罩边缘。下面是具体的解决方案：

修改思路 #

添加一个伪元素，利用与遮罩相同的mask属性同步动画，通过padding和背景色模拟环形边框，这样边框会跟随遮罩的放大效果同步变化，不会被mask裁剪。

修改后的CSS代码 #

.overlay-container {
    position: relative;
    height: 250vh;
}

.fixed-sections {
    position: sticky;
    top: 0;
    height: 100vh;
}

.animation-section {
    position: absolute;
    top: 0;
    left: 0;
    height: 125vh;
    width: 100%;
    z-index: 1;
    background: black;
}

.interactive-section {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 20;
    background: black;
    /* 用CSS变量统一控制遮罩大小，方便JS同步修改 */
    --mask-size: 0%;
    -webkit-mask-image: radial-gradient(
        circle at center, 
        black 0%, black 30%, transparent 30%);
    mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 30%);
    -webkit-mask-size: var(--mask-size) var(--mask-size);
    mask-size: var(--mask-size) var(--mask-size);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* 添加伪元素模拟边框 */
.interactive-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 确保边框在遮罩下方，不遮挡透出的内容 */
    padding: 3px; /* 边框宽度，可按需调整 */
    background: blue; /* 边框颜色，可按需调整 */
    box-sizing: border-box;
    /* 复用遮罩属性，同步动画 */
    -webkit-mask-image: radial-gradient(
        circle at center, 
        transparent 0%, transparent 30%, black 30%);
    mask-image: radial-gradient(circle at center, transparent 0%, transparent 30%, black 30%);
    -webkit-mask-size: var(--mask-size) var(--mask-size);
    mask-size: var(--mask-size) var(--mask-size);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

关键说明 #

1. 引入--mask-size CSS变量，统一控制遮罩和边框的大小，后续通过JS修改这个变量即可同步两者的动画。
2. 伪元素的mask渐变与原遮罩相反：中间透明、外部显示，这样padding区域的蓝色背景就会显示为环形边框。
3. 调整伪元素的z-index，确保边框不会遮挡透过遮罩显示的下方区块。

如果你的滚动动画是通过JS修改mask-size，只需要把修改目标换成--mask-size变量即可，示例如下：

// 滚动时更新遮罩大小
window.addEventListener('scroll', () => {
  const scrollPercent = window.scrollY / (document.body.offsetHeight - window.innerHeight);
  document.querySelector('.interactive-section').style.setProperty('--mask-size', `${scrollPercent * 200}%`);
});

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