带inset阴影的div内实现可点击/获焦元素的技术求助

嘿，我明白你遇到的困扰了——本来想给.calendar加个内阴影提升视觉效果，结果里面的按钮突然点不动了，感觉像是容器把内容给盖住了对吧？其实这不是CSS做不到，大概率是你实现内阴影的方式有小问题，咱们一步步解决：

核心问题分析 #

首先要澄清：原生的box-shadow: inset内阴影完全不会阻挡内部元素的交互，因为它是绘制在容器的背景层之上、内容层之下的，相当于给容器内部“刻”了个阴影，不会盖住里面的按钮或链接。

那为什么你的情况会出现点击失效？大概率是你用了伪元素（::before/::after）来模拟内阴影，而伪元素默认会覆盖在容器内容的上方，挡住了点击事件。

解决方案 #

方案1：用原生box-shadow: inset（最简单） #

如果你的内阴影不需要特别复杂的效果，直接用原生属性就好，完全不会影响交互：

.calendar {
  /* 示例内阴影样式，可按需调整 */
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
  padding: 1rem;
  background-color: #f8f9fa;
}

把这段CSS应用到你的.calendar上，内部的按钮就能正常点击了。

方案2：伪元素模拟阴影时添加pointer-events: none #

如果你必须用伪元素实现复杂的内阴影效果（比如渐变阴影、多重阴影组合），只需要给伪元素加一个pointer-events: none属性，让点击事件“穿透”伪元素，到达下面的内容：

.calendar {
  position: relative;
  padding: 1rem;
  background-color: #f8f9fa;
  overflow: hidden; /* 确保阴影不会溢出容器 */
}

.calendar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 你的复杂内阴影样式 */
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
  /* 关键属性：让点击事件忽略伪元素 */
  pointer-events: none;
}

这个属性的作用是告诉浏览器：不要把伪元素当作可交互的元素，点击它的时候直接触发下层元素的事件。

完整示例代码 #

结合你的HTML结构，完整的可运行代码如下：

<div class="calendar">
  <div class="card-deck p-2 w-100">
    <div class="card mx-2">
      <div class="card-header">
        2020-04-01
      </div>
      <div class="card-body">
        <button type="button" class="btn btn-sm btn-primary btn-block">09:00</button>
        <button type="button" class="btn btn-sm btn-primary btn-block">10:00</button>
        <button type="button" class="btn btn-sm btn-primary btn-block">11:00</button>
        <button type="button" class="btn btn-sm btn-primary btn-block">12:00</button>
        <button type="button" class="btn btn-sm btn-primary btn-block">13:00</button>
        <button type="button" class="btn btn-sm btn-primary btn-block">14:00</button>
        <button type="button" class="btn btn-sm btn-primary btn-block">15:00</button>
      </div>
    </div>
  </div>
</div>

.calendar {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
  padding: 1rem;
  background-color: #f8f9fa;
}

/* 如果用伪元素方案就替换上面的.calendar样式 */
/* .calendar {
  position: relative;
  padding: 1rem;
  background-color: #f8f9fa;
  overflow: hidden;
}

.calendar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
  pointer-events: none;
} */

总结 #

• 原生内阴影不会影响交互，放心用
• 伪元素模拟阴影时，pointer-events: none是解决点击失效的关键
• 完全不需要把.calendar放在内容上方，这是对CSS阴影层级的误解

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