为什么框阴影不起作用？

Question

I can't seem to get box-shadow to work for my div element with the following CSS code:

#header {
background-color: #B89E70;
top: 0;
left: 0;
width: 100%;
height: 5%;
position: fixed;
box-shadow: 0px, 20px, 5px, rgba(0, 0, 0, 0.7);


font-family: arial;
text-align: center;
}

I'm using Chrome. Any ideas of what I might've missed?

Answer 1

The value for the box-shadow shouldn't have commas in it. The box-shadow property uses commas to separate multiple shadows.

You should update your box-shadow like this:

box-shadow: 0px 20px 5px rgba(0,0,0,0.7);

Keep in mind that you can display multiple shadows on one box like this:

box-shadow: 0px 20px 5px rgba(0,0,0,0.7), 5px -5px 0 rgba(0,0,0,1);

You can make some pretty cool effects that way!