如何使用 CSS 在导航栏下添加阴影？答案

【问题标题】：How to add a shadow under a navbar using CSS?如何使用 CSS 在导航栏下添加阴影？
【发布时间】：2020-03-14 07:26:43
【问题描述】：

当谈到 HTML 和 CSS 时，我是一个绝对的初学者，所以我认为这对你们中的一些人来说可能听起来很容易。

我一直在寻找一种向导航栏添加简单阴影的方法，例如 codecademy.com/ 上的阴影到我现有的导航栏。我在下面的 codepen 中包含了它的 HTML 和 CSS：

[https://www.codepen.io/CodingAddict/pen/QWbmBVQ][2]

【问题讨论】：

【解决方案1】：

为您的导航栏添加框阴影。不要到站点标题。

nav {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}

【讨论】：

【解决方案2】：

只需在css文件中添加这一行

.site-header { box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); }

改变这个

.site-header nav { box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);} 要么导航 { box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);}

【讨论】：