为什么 box-shadow 不起作用？

Question

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

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

您可以通过这种方式制作一些非常酷的效果！