为什么盒子阴影不起作用？

Question

我似乎无法使用以下CSS代码为我的div元素设置box-shadow：

#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;
}

我正在使用Chrome。关于我可能错过的任何想法？

Answer 1

box-shadow的值不应包含逗号。 box-shadow属性使用逗号分隔多个阴影。

您应该像这样更新box-shadow：

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

请注意，您可以在一个方框中显示多个阴影，如下所示：

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

你可以通过这种方式制作一些很酷的效果！