仅在图像上有阴影,而不是整个宽度上?

时间:2018-10-24 05:11:48

标签: html css

这是该页面的图像: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的名称:)

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

只需将box-shadow样式添加到img标记中,如下所示

CSS代码-

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

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