仅在图像上显示阴影，而不是整个宽度？

Question

这是页面的图片：https://imgur.com/a/EN5TfTu

有什么建议可以让图像只有阴影而不是整个宽度吗？

我尝试了几种不同的方法，但都不起作用……很明显，我做错了什么。

下面是HTML：

<div class="jumbotron jumbotron-2">
  <div class="image-circle-3">
      <div class="center-4">  
  <%= image_tag @listing.image_url(:thumb) %>
      </div>
   </div>
</div>

CSS：

.jumbotron-2 {
  background-color: grey; // height: 25vh;
  background-size: auto;
}

.image-circle-3 {
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

.center-4 {
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  display: block;
}

图像应该是一个圆，但我去掉了CSS半径只是为了测试它并使事情变得简单。如果您想知道div的名称:)

Answer 1

将阴影设置为图像，而不是.image-circle-3类，如下所示：

.center-4 img{
   box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

Answer 2

只需将box-shadow样式放入img标签，如下所示

CSS代码-

.image-circle-3 img {
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

此外，请访问此JSFiddle进行现场直播