Question

我需要使用CSS3为DIV添加阴影。为了为DIV的底部添加阴影，我使用：

-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);

但是如何为顶部添加相同的阴影呢？

谢谢

Answer 1

您可以使用逗号分隔参数来应用多个box-shadow：

box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 -1px 10px rgba(0,0,0,0.75);

Answer 2

你有2个职位：

1）使用展开属性，负面，以弥补模糊，避免阴影显示在两侧：

.one {
    box-shadow: 0px 6px 8px -3px rgba(0, 0, 0, 0.75), 0px -6px 8px -3px rgba(0, 0, 0, 0.75);
}

2）剪辑结果，使边框不再显示。你需要职位：绝对的，这个工作：

.two {
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.75), 0px -6px 8px rgba(0, 0, 0, 0.75);
    clip: rect(-12px, 100px, 62px, 0px);
position: absolute;
}

fiddle

Answer 3

这样的东西正是你所需要的;

.box {
    box-shadow: 0  8px 8px -8px rgba(0,0,0,.75), 
                0 -8px 8px -8px rgba(0,0,0,.75);
}

这是jsfiddle

如何为div的顶部和底部制作CSS阴影？

3 个答案:

fiddle