仅在侧面的一部分显示框阴影

Question

所以我有一个标题显示在下面的代码段中。

我的问题是我只希望a标记周围的阴影显示在已扩展到其容器div之外的部分上，以创建白边是所有元素的印象。

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

我以后的屏幕截图，以防我的描述功能无效：

我尝试过玩z-index，但无法让它发挥作用。

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

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

＆＃13;

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是box-shadow语法，

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

尝试减少它spread-radius并将其增加到y-axis。

＆＃13;

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

编辑： -

使用jquery，您可以动态计算跨度的css。 Check this.

修改了Html，在锚标记下添加了<span>并在范围中添加了阴影

* {
  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;*/
  z-index:100;
  position:absolute;
}

.shadow {
  display: inline-block;
  margin-left: 30px;
  padding: 10px;
  margin-top:50px;
  height: 10px;
  width:120px;
  background: white;
  box-shadow: 0px 0px 5px #000000;
  z-index:0;
  position:absolute;
}

img {
  height: 100%;
}

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

Answer 3

您可以通过css pseudo元素获取它。

只需添加css部分

a:after {
  content:'';
  position:absolute;
  bottom:0px;
  left:0px;
  height:20px;
  display:block;
  width:100%;
  box-shadow:5px 5px 5px -5px #000000;
}
a:before {
  content:'';
  position:absolute;
  bottom:0px;
  left:0px;
  height:20px;
  display:block;
  width:100%;
  box-shadow:-5px 5px 5px -5px #000000;
}

   * {
  padding: 0;
  margin: 0;
  box-sizing:border-box;
}

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;
  /* box-shadow:0px 5px 5px -5px #000000; */
}
a:after {
  content:'';
  position:absolute;
  bottom:0px;
  left:0px;
  height:20px;
  display:block;
  width:100%;
  box-shadow:5px 5px 5px -5px #000000;
}
a:before {
  content:'';
  position:absolute;
  bottom:0px;
  left:0px;
  height:20px;
  display:block;
  width:100%;
  box-shadow:-5px 5px 5px -5px #000000;
}
img {
  height: 100%;
}

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