html - CSS3 框阴影问题

Question

将此 css 用于阴影

-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;

如何去除 div 顶部和底部的阴影，只留下水平阴影？这可能吗？

Answer 1

有两种方法可以做到这一点，但这取决于您是在寻找硬边还是软边。

方法一:

这里的技巧是将您的盒子包裹在一个容器中，并将 overflow:hidden 应用于容器。如果你给你的盒子左右边距与阴影距离相同，阴影将只在侧面可见；它将被剪裁在顶部和底部。

举个例子: http://jsfiddle.net/2Luef/1/

方法二:

或者，根据您正在寻找的效果，您可以像这样使用多个框阴影来做一些事情: http://jsfiddle.net/2Luef/3/

它没有像上面那样的剪裁外观，但可以说是更好看的外观。它还只使用一个 DOM 元素。