如何为AG Grid固定列添加覆盖表头与表体的垂直阴影

原代码不生效通常是因为AG Grid默认样式优先级更高，或选择器未覆盖正确元素，以下是两种可靠实现方式：

方法一：针对固定列容器添加阴影 #

使用更精确的选择器，同时调整阴影方向（左固定列用右侧外阴影，右固定列用左侧外阴影，避免内阴影导致的显示问题）：

/* 左固定列右侧添加垂直阴影 */
.ag-pinned-left-cols-container {
  box-shadow: 5px 0 8px -3px rgba(0, 0, 0, 0.15);
  z-index: 1; /* 确保阴影显示在非固定列上方 */
}

/* 右固定列左侧添加垂直阴影 */
.ag-pinned-right-cols-container {
  box-shadow: -5px 0 8px -3px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

方法二：针对表头和表体元素分别添加阴影（适配复杂场景） #

如果容器层级限制导致阴影不显示，可直接给固定列的表头和单元格单独设置：

/* 左固定列表头右侧阴影 */
.ag-pinned-left-header {
  box-shadow: 5px 0 8px -3px rgba(0, 0, 0, 0.15);
}

/* 左固定列表体单元格右侧阴影 */
.ag-pinned-left-cols-container .ag-cell {
  box-shadow: 5px 0 8px -3px rgba(0, 0, 0, 0.15);
}

/* 右固定列表头左侧阴影 */
.ag-pinned-right-header {
  box-shadow: -5px 0 8px -3px rgba(0, 0, 0, 0.15);
}

/* 右固定列表体单元格左侧阴影 */
.ag-pinned-right-cols-container .ag-cell {
  box-shadow: -5px 0 8px -3px rgba(0, 0, 0, 0.15);
}

关键注意点 #

• 不要用inset内阴影：内阴影会在容器内部生成，无法实现固定列与其他列的分隔效果。
• 调整z-index：保证固定列容器的层级高于非固定列，阴影才能正常显示。
• 微调阴影参数：可根据视觉需求调整5px（水平偏移）、8px（模糊半径）等数值，优化阴影的深浅和范围。

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