Ant Design侧边栏触发器：移除左侧box-shadow保留其余三边阴影

嘿，我看你需求里可能有点小笔误——你说要保留顶部、右侧、左侧的阴影，同时移除左侧的阴影，这明显矛盾啦😉 推测你应该是想保留顶部、右侧、底部的阴影，彻底去掉左侧的模糊效果（毕竟原阴影2px 2px 8px rgba(0,0,0,0.15)是向右下偏移的，会在左侧延伸出多余的模糊），下面给你两种靠谱的解决方案：

方案一：拆分阴影，精准控制各方向 #

直接把阴影拆成顶部、右侧、底部三个独立部分，完全避开左侧区域，这样就不会有左侧的模糊了。LESS代码如下：

// 提高选择器优先级，确保覆盖Ant Design默认样式
.ant-layout .ant-layout-sider-zero-width-trigger {
  // 先清空默认阴影
  box-shadow: none;
  // 组合自定义阴影
  box-shadow: 
    0 -8px 8px -8px rgba(0, 0, 0, 0.15), // 顶部阴影：向上偏移+缩小范围，只在顶部边缘显示
    2px 0 8px rgba(0, 0, 0, 0.15),       // 右侧阴影：和原阴影水平偏移一致
    0 2px 8px rgba(0, 0, 0, 0.15);       // 底部阴影：和原阴影垂直偏移一致
}

方案二：用clip-path裁剪左侧阴影 #

如果你想保留原阴影的整体质感，只是切掉左侧的模糊部分，用clip-path会更简单：

.ant-layout .ant-layout-sider-zero-width-trigger {
  // 保留原阴影参数
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
  // 裁剪左侧区域：inset(顶部偏移 右侧偏移 底部偏移 左侧偏移)
  // 这里左侧设为0，意味着元素左侧边界外的内容（也就是左侧的阴影）会被裁掉
  clip-path: inset(0 -8px 0 0);
  // 右侧设为-8px是为了容纳阴影的模糊半径，避免右侧阴影被裁剪
}

小提示： #

• 如果你确实是想保留顶部、右侧、左侧阴影，移除底部的话，把方案一的阴影改成：

  box-shadow: 
    0 -8px 8px -8px rgba(0, 0, 0, 0.15),
    2px 0 8px rgba(0, 0, 0, 0.15),
    -2px 0 8px rgba(0, 0, 0, 0.15);
  

• 你的JSX代码完全不用改，只需要把LESS样式加到项目里就行啦～

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