box-shadow超出clip-path边界：水平菜单出现异常垂直线条

问题根源 #

1. clip-path inset参数逻辑错误：你定义的--shadow-clip: border-box inset(0 0 -4px 0)中，inset的底部参数用了负数，导致裁剪边界向外扩展，底部阴影的边缘溢出到元素侧面，和相邻元素的阴影/背景叠加后产生视觉垂直线条。
2. Flex布局像素精度问题：flex分配宽度时可能产生非整数像素，元素边界出现半像素偏移，抗锯齿渲染后显示细微线条。
3. 激活项伪元素阴影叠加：激活项的::before/::after阴影和相邻非激活项的底部阴影在边界处叠加，放大了视觉缝隙。

修复方案 #

1. 修正clip-path的inset参数

调整inset参数，仅让底部阴影可见，避免侧面溢出：

header {
  --shadow-clip: inset(0 0 0 -4px); /* 上、右、左裁剪边界与元素重合，底部向外扩展容纳阴影 */
}

2. 消除Flex子元素半像素偏移

给菜单项添加flex-shrink: 0避免宽度被压缩为非整数像素，同时给ul设置gap: 0消除默认间距：

ul {
  padding: 0;
  margin: 0;
  height: 3em;
  display: flex;
  align-items: stretch;
  list-style: none;
  gap: 0;
}

li {
  flex-shrink: 0;
}

3. 调整激活项伪元素样式

加宽伪元素并用激活项背景色填充，覆盖可能的缝隙，同时调整位置避免阴影冲突：

li[aria-current='page']::before,
li[aria-current='page']::after {
  content: '';
  width: 4px;
  position: absolute;
  box-shadow: var(--shadow-side);
  top: 0;
  bottom: 0;
  background: white;
}
li[aria-current='page']::before {
  left: -4px;
}
li[aria-current='page']::after {
  right: -4px;
}

4. 优化渲染精度

给元素添加transform: translateZ(0)触发GPU加速，提升渲染边界清晰度：

li, .spacer {
  position: relative;
  box-shadow: var(--shadow-bottom);
  clip-path: var(--shadow-clip);
  transform: translateZ(0);
}

完整修正代码 #

* {
  box-sizing: border-box;
}
header {
  --color-text: rgba(0, 0, 0, 0.7);
  --color-theme-1: #00a99d;
  --shadow-bottom: 0 -4px 4px 4px rgba(0, 0, 0, 0.6);
  --shadow-side: 0 0 4px 2px rgba(0, 0, 0, 0.6);
  --shadow-clip: inset(0 0 0 -4px);
}
nav {
  background: rgba(0, 0, 60, 0.3);
  display: flex;
  flex: 1;
  align-items: stretch;
}
.spacer {
  display: flex;
  flex: 1;
  transform: translateZ(0);
}
ul {
  padding: 0;
  margin: 0;
  height: 3em;
  display: flex;
  align-items: stretch;
  list-style: none;
  gap: 0;
}
li,
.spacer {
  position: relative;
  box-shadow: var(--shadow-bottom);
  clip-path: var(--shadow-clip);
  transform: translateZ(0);
}
li {
  flex-shrink: 0;
}
li[aria-current='page'] {
  background: white;
  box-shadow: none;
  clip-path: var(--shadow-clip);
}
li[aria-current='page'] a {
  color: var(--color-text);
}

li[aria-current='page']::before,
li[aria-current='page']::after {
  content: '';
  width: 4px;
  position: absolute;
  box-shadow: var(--shadow-side);
  top: 0;
  bottom: 0;
  background: white;
}
li[aria-current='page']::before {
  left: -4px;
}
li[aria-current='page']::after {
  right: -4px;
}
nav a {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0 0.5rem;
  color: var(--color-text);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}

<header>
    <nav>
        <div class="spacer"> </div>
        <ul>
            <li aria-current='page'>
                <a href="/">Home</a>
            </li>
            <li>
                <a href="/about">About</a>
            </li>
            <li>
                <a href="/sverdle">Contact Us</a>
            </li>
        </ul>
        <div class="spacer"> </div>
    </nav>
</header>

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