CSS 阴影在另一个元素下方

Question

我正在尝试实现我用 Photoshop 复制的以下阴影效果：

我想像下面这样的 HTML 基础就足够了，但不确定：

<div id="anotherMask">
  <div id="mask">  
    <div id="shadow">
        <div id="content">
            FOO
        </div>
    </div>
  </div>
</div>

我不想在此处添加 CSS，因为这会使问题有点太长。所以这里有两个方法的例子，现实中还有更多。我尝试使用方框阴影，但它没有按预期工作：

https://jsfiddle.net/tvhydm74/

我尝试使用 div 和黑色边框、透明背景和模糊滤镜，但它过滤了所有内容，所以它不起作用：

https://jsfiddle.net/6gbsejq4/

任何帮助将不胜感激:)

Answer 1

您可以使用 inset box-shadow:

.content {
  height: 100px;
  width: 100px;
  background: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  box-shadow: inset 3px 3px 7px 2px rgba(0, 0, 0, 0.75);
}

.container {
  display: inline-block;
  background: red;
  padding: 20px;
}

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

CSS 阴影在另一个元素下方

CSS Shadow on a element below another one

html

css

shadow

box-shadow