Css 无论如何，让一个div在另一个div下可以点击，就像阴影一样？

所以。。。我为一个奇怪的问题创建了一个奇怪的解决方案：我需要有直边的阴影，比如有干净边的渐变，而不是长方体阴影

我使用：after元素将渐变附加到需要它的元素的底部（在示例中，这被注释掉）。然后我尝试了一个负尺寸的嵌入式阴影，效果也是一样的。除了一个小细节外，这些都能很好地工作：我不能像阴影一样使用它，因为它覆盖的元素有时是不可点击的

样本：

有些事情我已经排除了：

1） 在下面的元素上使用嵌入阴影：它需要应用于原始元素，否则当物体移动时，它的功能将与阴影不同。如果我能弄明白

2） 使用具有负扩散或大小的长方体阴影：这是可行的，我会使用它，除非它看起来不像设计师想要的那样

3） Z-index：它很凌乱，因为它是一个非常动态的页面，所以我可以在某些地方使用它，但在其他地方不能使用它，因为它是一个阴影，至少应该在视觉上覆盖一切

所以，概括一下，我希望它看起来与干净的边缘完全一样，我需要它连接到元素而不是周围的元素，我真的希望它是一个纯CSS解决方案，就像伪元素一样

有什么想法吗？

html:

---

在我看来，

位置：绝对会给你带来麻烦。为什么不将阴影作为插入阴影插入h3中呢？因为在codepen示例中的实例中，这是可行的，但它在全局范围内不起作用，因为它不作为阴影。想象一下，下面有更多的内容，导航是固定的，所以一旦h3滚动出视图，阴影就消失了。就我所见，你为什么不使用图像呢？比如：背景：红色url（img/myimg.png）repeat-x；。这样你就有了你的“阴影”和背景色，而且它仍然可以点击，因为它是背景。
<nav>
  <h1>I'm an Example Header</h1>
</nav>
<section>
  <h3>You can't click me because the shadow above is covering me!</h3>

nav{
  border-bottom:3px solid #000;
  position:relative;
}

h1{
  font-family: "Helvetica";
  text-transform:uppercase;
  margin: 20px 10px 10px;
}

h3{
  font-family: Helvetica, sans-serif;
  font-weight: 600;
  padding:10px;
  margin:0;
  cursor: pointer;
  width: 98.75%;
  color: white;
  background: #ff0000;
  box-shadow: inset 0 20px 40px -20px #000; 
}