CSS中，使用box-shadow为元素添加阴影效果时，默认情况下，阴影位于元素的底部，即顶部该元素覆盖了阴影。然而，如果你想保持阴影效果在顶部，有一些技巧可以实现它。
box-shadow
一种简单的方法是使用 ::before 或 ::after 伪元素在元素顶部创建覆盖层并为伪元素提供阴影。这样，伪元素的阴影将出现在元素阴影的顶部。
::before
::after
这里是示例代码：
shadow盒子
css：
.box { 位置：相对； 宽度：200px； 高度：100px； 背景颜色：#f0f0f0； 边框：1px实心#ccc； } .box::之前{ 内容： ””; 位置：绝对； 顶部：-5px； /* 调整伪元素的位置以显示阴影 */ 左：-5px； /* 调整伪元素的位置以显示阴影 */ 宽度：100%； 高度：100%； 盒子-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 这里设置伪元素的阴影效果 */ z 索引：1； /* 确保伪元素位于元素之上 */ }
在此示例中，我们使用 ::before 伪元素创建一个叠加层并为其添加阴影。通过调整伪元素的 top 和 left 属性，我们可以将伪元素定位为与元素重叠。最后，使用 z-index 属性确保伪元素位于元素之上，以便伪元素的阴影覆盖在元素的阴影上。
top
left
z-index
类似的方式，也可以使用::after伪元素来达到同样的效果。只需调整定位和z-index。
