如何添加图像阴影

Question

如何像书一样添加图像阴影我也添加了这个css但是它不起作用

img {
  box-shadow: 25px 25px 20px 10px rgb(113 108 108 / 53%);
}

<div class="position-relative book_width">
  <div class="overlay mini_book"></div>
  <img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">
  <p> Remembering Steve Howell</p>
</div>

Answer 1

您可以尝试将 clip-path 添加到 box-shadow

img {
  box-shadow: 5px 5px 20px 24px rgb(113 108 108 / 53%);
  margin:50px;
  width:200px;
  clip-path:polygon(0 0,100% 0,200% 100%,200% 200%,100% 200%,0 100%);
}

body {
  background:pink;
}

<img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">

也像下面有些模糊：

.box {
  margin: 50px;
  width: 200px;
  position: relative;
}
.box span {
  filter:blur(2px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 200% 100%, 200% 200%, 100% 200%, 0 100%);
  box-shadow: 5px 5px 20px 24px rgb(113 108 108 / 53%);
  background: rgb(113 108 108 / 53%);
}

img {
  display: block;
  width: 100%;
  position:relative;
  z-index:1;
}

body {
  background: pink;
}

<div class="box">
  <img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">
  <span></span>
</div>

Answer 2

您可以尝试如下组合框阴影：

HTML

<img src="https://picsum.photos/200">

CSS

img {
   box-shadow: 4px 4px 4px #999,
   6px 6px 6px #999,
   8px 8px 8px #999,
   10px 10px 10px #999,
   12px 12px 12px #999,
   14px 14px 14px #999;
}

注意：请根据您的要求调整值和颜色:)