如何在 CSS 上制作周围图像 border/drop 的阴影效果

Question

我正在做一个前端 UI，现在有一个部分我被困了很长一段时间。 我想在图像周围添加效果，如下所示。

我一直在研究这个问题，但找不到合适的解决方案。我认为我们可以通过以下方式做到这一点：

• 添加某种特定于边框的负边距
• 以某种方式删除 shadow/box 阴影属性

真的很想知道这是怎么回事。

Answer 1

这是给你的。

别忘了补充

img {
  max-width: 100%;
  display: block;
}

让图像表现得像 div

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

body {
  
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.container{
  height:300px;
  width:300px;
  border: 2px solid black;
  box-shadow: 5px 5px red, 
    5px 5px 0px 1.5px black;
}

<div class="container"></div>