如何在 CSS 中灰色且模糊的 header 下方添加阴影？

Question

我想了解如何在我的 header 下方制作一个灰色且模糊的阴影。我已经阅读了关于此的 W3 Schools article，但我希望它仅低于我的 header 和水平，同时使其变得模糊和灰色。

#header {
  /*In This Line- CSS for Box Shadow*/
  position:fixed
  }

<header id="header">
My Header
<!-- Shadow -->
</header>

Answer 1

试试这个：

box-shadow: 0px 20px 40px 10px #aaa;

Answer 2

#header {
  /In This Line- CSS for Box Shadow/
  position:fixed;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  }

<header id="header">
My Header
<!-- Shadow -->
</header>

How do you add a shadow underneath a header that is gray and blurry in CSS?