Избавьтесь от горизонтальной тени, даже если это 0

Question

Даже если я установлю горизонтальное значение box-shadow 0, это даст ширину плюс div.Как я могу избавиться от этих лишних пикселей, если ширина элемента неизвестна или она установлена ​​на 100%?

Я нашел этот метод, который использует свойство CSS clip, но этоработает только в том случае, если ширина элементов известна в пикселях.

Я могу рассчитать пиксели с помощью 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;