css - 去掉水平盒子阴影，即使它是 0

Question

即使我将 box-shadow 水平值设置为 0，它也会给 div 加上宽度。如果元素宽度未知或设置为 100%，我怎样才能摆脱这些额外的像素？

我发现这种使用 CSS 剪辑属性的方法，但它仅在元素宽度以像素为单位已知的情况下才有效。

我可以用 jquery/javascript 计算像素，然后使用该值，但我确信有一个更简单的。

谢谢。

Answer 1

您需要添加一个包装器，将其浮动，然后设置overflow: hidden.

#wrapper {
  float: left;
  margin: 50px;
  padding: 0 20px;
  overflow: hidden;
}

这是一个演示 http://jsfiddle.net/n8LWF/

Answer 2

W3C给你答案

<shadow> = inset? && [ <length>{2,4} && <color>? ]
...
The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.

http://www.w3.org/TR/css3-background/#the-box-shadow

您在框阴影中有 4 个属性。像这样你只能在 3 侧有阴影：

box-shadow: 0 5px 20px -5px black;