html - 仅在一侧显示框阴影

Question

所以我有一个 header ，显示在下面的代码片段中。

我的问题是我只希望 a 标签周围的阴影显示在已扩展出其容器 div 的部分，以营造白色的印象边都是一个元素。

基本上我只希望左侧和右侧的阴影从 a 元素的底部延伸到 div 的底部。同时还显示在 a 元素的底部。

如果我的描述功能不起作用，我所追求的屏幕截图:

我试过使用 z-index 但没能成功。

我对 z-index 的想法是将 a 推到 div 后面，然后拉动 img在所有人面前。

我更喜欢纯 CSS 解决方案，因为我不想修改 html，但如果必须的话，我也必须这样做。

* {
  padding: 0;
  margin: 0;
}

div {
  height: 50px;
  width: 100%;
  background: white;
  box-shadow: 0px 0px 5px #000000;
}

a {
  display: inline-block;
  margin-left: 30px;
  padding: 10px;
  height: 60px;
  background: white;
  box-shadow: 0px 0px 5px #000000;
}

img {
  height: 100%;
}

<div>
  <a href="#">
    <img src="https://via.placeholder.com/200x100">
  </a>
</div>

Answer 1

这里是box-shadow语法，

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color 

尝试减小它的 spread-radius 并增加它朝向 y 轴 的阴影。

* {
  padding: 0;
  margin: 0;
}

div {
  height: 50px;
  width: 100%;
  background: white;
  box-shadow: 0px 0px 5px #000000;
}

a {
  display: inline-block;
  margin-left: 30px;
  padding: 10px;
  height: 60px;
  background: white;
  position: relative;
}

a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 5px #000000;
  z-index: -1;
}

img {
  height: 100%;
}

<div>
  <a href="#">
    <img src="https://via.placeholder.com/200x100">
  </a>
</div>