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

Question

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

关于如何仅使图像带有阴影而不是整个宽度的任何建议？

我尝试了几种不同的方法，但是都没有用……我显然做错了什么。

这是HTML：

a = []
for i in y:
    print(i)
    a.append(i)

CSS：

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

该图像本来应该是一个圆圈，但我只是为了测试它并保持简单而取出了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进行现场直播