如何实现box shadow穿透input可见？求助解决阴影显示问题

要实现类似参考图中box-shadow穿透input显示的效果，核心是让阴影能够突破input的背景遮挡，具体可通过以下两种方式实现：

方案一：透明input+内外阴影组合 #

直接将input的背景设为透明，同时搭配外部阴影与内部阴影，让阴影在input的内外区域都能显示：

.input1, .input2, .input3 {
  width: 200px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  /* 关键：设置背景透明，让内部阴影不再被遮挡 */
  background-color: transparent;
  /* 外部阴影+内部阴影组合，模拟穿透视觉效果 */
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.15);
}

透明背景会让内部的inset阴影直接显现，外部阴影则围绕input边缘，整体呈现阴影“穿透”input的效果。

方案二：父容器承载阴影+半透明白色input #

如果需要保留input的白色背景质感，可通过父容器设置阴影，同时将input背景设为半透明，让父容器的阴影透过input边缘显现：

/* 新增input的父容器样式 */
.input-wrap {
  display: inline-block;
  margin: 10px;
  /* 父容器设置阴影 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 1px;
}

.input-wrap input {
  width: 200px;
  height: 40px;
  padding: 0 10px;
  border: none;
  /* 半透明白色背景，让父容器阴影透过边缘隐约显现 */
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
}

这种方式更贴近参考图的视觉效果：阴影围绕在input外围，同时透过半透明的input边缘透出，营造出“穿透”的层次感。

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