即使它是0，也要摆脱水平框阴影

Question

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

我找到了使用CSS剪辑属性的this方法，但只有在以像素为单位知道元素宽度时它才有效。

我可以使用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;