本文讲解如何通过伪元素 ::before 构建视觉上“覆盖”边框的遮罩层，使子元素（如动画线条）在旋转圆环中自然隐入边框区域，解决因 stacking context 导致的 z-index 失效问题。
本文讲解如何通过伪元素 `::before` 构建视觉上“覆盖”边框的遮罩层，使子元素（如动画线条）在旋转圆环中自然隐入边框区域，解决因 stacking context 导致的 z-index 失效问题。
在构建旋转加载器（spinner）时，一个常见需求是：让一条动态移动的线条（.line）穿过一个带厚边框的圆形容器（.rotate），并使其在进入边框区域时“消失”——即视觉上被边框遮挡，而非穿透或悬浮其上。但直接使用 z-index 往往无效，根本原因在于：当父容器设置了 border 且子元素为 position: absolute 时，若未正确建立层叠上下文（stacking context），z-index 不会按预期生效；更关键的是，CSS 边框本身不构成可遮挡内容的“图层”，它只是绘制在容器边缘的装饰，无法主动裁剪或覆盖内部子元素。
此时，推荐采用「伪元素遮罩法」：利用 ::before 在 .rotate 元素上创建一个与边框完全重叠、且层级更高的同色圆形遮罩层，从而实现“视觉隐藏”效果。
✅ 正确实现方式（含优化细节）
.line {
width: 10px;
height: 120px;
background: #2979ff; /* 推荐使用更鲜明的蓝色 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中对齐，提升可维护性 */
animation: lineSlide 0.75s infinite alternate;
}
@keyframes lineSlide {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.rotate {
width: 120px;
aspect-ratio: 1; /* 替代显式 height，更健壮 */
border-radius: 50%;
border: solid 64px #363636;
animation: spin 1.36s linear infinite;
position: relative;
margin: 0 auto; /* 简化居中写法 */
}
/* 关键：遮罩伪元素 */
.rotate::before {
content: '';
position: absolute;
inset: -64px; /* 向外扩展 64px，确保完全覆盖 border 区域 */
border-radius: 50%;
border: solid 64px #363636;
z-index: 1; /* 高于 .line（默认 z-index: auto → stacking level 0） */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}<div class="rotate"> <div class="line"></div> </div>
? 为什么这样有效？
- ::before 伪元素与 .rotate 共享同一 stacking context，且 z-index: 1 明确将其置于 .line（无 z-index，属默认层）之上；
- inset: -64px 等价于 top: -64px; right: -64px; bottom: -64px; left: -64px，确保伪元素尺寸比容器大出两倍边框宽度，完整包裹整个边框区域；
- 伪元素的 border 与容器边框颜色、粗细完全一致，形成无缝视觉融合，使 .line 在穿过该区域时被“遮住”，产生“隐入边框”的错觉。
⚠️ 注意事项
- ❌ 避免给 .line 设置 z-index: -1：这会将其移至父容器背景层之下，可能被父容器 border 或其他祖先背景遮盖，行为不可控；
- ✅ 务必保证 .rotate 有 position: relative —— 这是 ::before 绝对定位的参照容器；
- ✅ 使用 aspect-ratio: 1 替代固定 height，增强响应式鲁棒性；
- ✅ 动画建议统一使用 transform（如 rotate/translate）而非 left/top，以启用 GPU 加速，提升性能。
? 总结
当需要让子元素“藏进”边框时，不要依赖 z-index 与边框的直接交互——边框不是图层，而是绘制属性。真正可靠的做法是：用伪元素模拟一个可控制层级、尺寸和位置的遮罩层。该方案兼容现代浏览器（Chrome 87+、Firefox 69+、Safari 15.4+），语义清晰、代码简洁，是构建专业级加载动画的推荐实践。
