如何在不使用SVG的情况下实现Div边框局部遮罩效果？

能否实现如上图所示的Div边框局部遮罩效果？需求如下：

• 不能设置background-color（网站整体背景是渐变效果）
• 用一个元素遮罩另一个Div的边框
• 不想使用SVG，要保留border属性的可编辑性

我尝试用伪元素结合mask属性（内部是黑色SVG矩形），但边框还是可见（哪怕直接在.card元素上用mask而非::after伪元素也没用）。

我的代码如下：

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 2rem;
  border: 1px solid var(--border-color);
  border-radius: 2vw;
}

.card::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 10px;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-mask: url("../../assets/rect-mask.svg");
  mask: url("../../assets/rect-mask.svg");
}

解决方案 #

不用SVG mask的话，直接用伪元素继承页面渐变背景覆盖边框局部区域即可，既保留border的可编辑性，又能完美适配渐变背景：

/* 示例页面渐变背景（根据实际项目调整） */
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  margin: 0;
  padding: 2rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2vw;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}

/* 遮罩边框的伪元素 */
.card::after {
  content: "";
  position: absolute;
  width: 60px; /* 宽度稍大于目标遮罩区域，确保完全覆盖边框 */
  height: 20px; /* 高度覆盖边框上下各1px，避免漏边 */
  top: -1px; /* 对齐边框顶部 */
  left: 50%;
  transform: translateX(-50%);
  background: inherit; /* 直接继承页面渐变背景 */
  border-radius: 2vw; /* 和卡片圆角匹配，避免视觉突兀 */
}

如果页面背景无法通过inherit继承（比如卡片嵌套在多层容器中），直接把页面渐变的CSS值复制到伪元素的background属性即可，确保视觉上和页面背景完全融合，达到边框被“挖空”的效果。

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