Mastering CSS

Adding box-shadow

Let's talk about the box-shadow property. On our final site, you can see we have this shadow below the main nav:

Let's move back to our CSS and find our nav selectors. box-shadow is a CSS3 property:

nav {  background-color: #fff;  position: fixed;  left: 0;  right: 0;  top: 0;  z-index:1;  box-shadow: 0 8px;}

We're targeting the nav element and using the nonprefixed version, which is supported in all major browsers, starting with IE9 and above. We don't have to go back and any vendor prefixes because the specification has matured enough, as all the browsers now support the nonprefixed version. The first two values we add are