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

Question

对于HTML和CSS我是一个绝对的新手，所以我认为这可能对你们中的一些人来说很容易。

我正在寻找一种方法来向我的现有导航栏添加简单的阴影效果，就像Codecademy网站上的那个一样。我在这个codepen中包含了它的HTML和CSS。

- CodingNoob

Answer 1

给你的导航栏添加一个阴影，但不要给网站头部添加。

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

- Kasun Gunawardana

---

谢谢！你能解释一下这段代码中每个元素的技术含义吗？ - CodingNoob

Answer 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);
}

或者

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

- Tony Nagendra Kumar

---

我刚刚尝试将那段代码添加到CSS文件的末尾，但不幸的是它没有起作用 :(。 - CodingNoob