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

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

你有两种可能性:

1) 使用负值的 spread 属性来补偿模糊并避免阴影出现在侧面:

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

2) 裁剪结果，使边框不再显示。你需要 position: absolute 才能使这个工作:

.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