【发布时间】：2020-11-23 13:26:50
【问题描述】：
我正在使用 scss 自定义和 Ant Design table，并希望在悬停表格标题单元格时添加框阴影。使用下面的代码，元素的四个边都被一个 1px 的绿色实心边框包围，但盒子阴影只出现在元素的左侧，在它外面：
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
它是这样的：
如何将盒子阴影添加到元素的每一侧，从里到外？我试图让它工作，但我错过了一些东西。 TIA。
【问题讨论】：
-
在您链接到的 Ant 页面上，将
position: relative; z-index: 1;添加到您的 CSS 作品中。但是如果没有你自己的代码的minimal reproducible example，这是不可能的。 -
嗨@Turnip 非常感谢您的评论 - 积极的
z-index框阴影现在也显示在标题单元格的右侧。我已经将问题的其余部分（顶部和底部）跟踪到border-collapse是separate和border-spacing是0，但除了在 chrome 开发工具中，我不知道如何在我自己的CSS中覆盖它。如果我将它们都关闭，它会修复它。任何想法如何解决>恐怕我无法提供一个最小的可重现示例 -
“我无法提供最小的可重现示例” 为什么？这是本站的要求。如果您担心的是，它不一定是您的真实代码。
-
每个示例都提供了一个 codepen，您可以从 codepen.io/gc-nomade/pen/gOrYRdv 复制/粘贴代码或 fork 或重建您的案例问题 ...它表明 turnip 建议工作正常