[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

您可以使用插图box-shadow：

Answer 2

将您的阴影放入内容对象，并将其设置为“插入”：