另一个元素下方的元素上的CSS阴影[重复]答案

【问题标题】：CSS Shadow on a element below another one [duplicate]另一个元素下方的元素上的CSS阴影[重复]
【发布时间】：2019-11-19 20:38:21
【问题描述】：

我正在尝试实现以下使用 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/

任何帮助将不胜感激:)

【问题讨论】：

标签： html css shadow box-shadow

【解决方案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>

【讨论】：

打败我）：