如何用CSS隐藏div圆角边框的指定部分，同时保留flex布局且无位置偏移？

方案1：下层伪元素描边+CSS Mask遮罩（零布局偏移、圆角100%匹配，无内容遮挡） #

• 全程保留目标div的所有原有属性：包括display: flex、内部布局参数、尺寸、圆角值完全不改动，仅移除div本身的原生边框设置，给div追加position: relative定位，所有内部内容的渲染位置、布局逻辑完全和原状态一致，无任何偏移。
• 给div添加绝对定位的下层描边伪元素，实现和原生边框完全一致的视觉效果：

  .target-div {
    /* 原有样式完全保留：display: flex; 所有内部布局规则、尺寸、圆角配置均不改动 */
    position: relative;
    border: none; /* 移除原div的原生边框，将描边逻辑迁移到下层伪元素 */
  }
  .target-div::before {
    content: "";
    position: absolute;
    /* 伪元素外轮廓和div原本带边框时的外轮廓完全对齐 */
    inset: calc(-1 * var(--border-width));
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--div-border-radius);
    pointer-events: none;
    z-index: -1; /* 放置在div内容层的下方，完全不遮挡内部所有内容 */
  }
  

• 隐藏指定位置的边框片段：直接给上述描边伪元素添加mask属性，在需要隐藏的边框对应位置设置透明遮罩，即可精准裁掉不需要的边框片段。因为描边层是完全和div外轮廓对齐绘制的，圆角曲率、直边段的长度和原生边框完全一致，根本不会出现之前用独立div模拟边框时的衔接偏差。
• 该方案的核心优势：
  • 完全不改动div的flex布局属性，无任何文档流改动，不会引发布局偏移
  • 描边层在内容下层，所有内部内容100%可见，无任何遮挡
  • 不需要匹配背景色做色块遮挡，哪怕div是半透明、渐变背景也能正常生效

方案2：分段渐变边框绘制（无额外渲染层） #

• 同样保留目标div的display: flex、尺寸、圆角所有属性不变，将原本的原生边框替换为border-image实现的分段描边，在需要隐藏边框的片段位置设置渐变透明值，即可实现局部边框隐藏效果。
• 实现时需要匹配圆角参数和边框宽度的比例，避免圆角段被渐变拉伸导致衔接错位。

此前拆分单方向边框、用额外div模拟边框片段出现圆角衔接偏差的核心原因：独立dom的尺寸计算，无法和div原生圆角的圆弧曲率、直边段长度做到像素级对齐，只要存在1px的尺寸差就会出现视觉错位。

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