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

#css #clip

#css #клип

Вопрос:

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

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

Я мог бы вычислить пиксели с помощью jquery / javascript, а затем использовать это значение, но я уверен, что есть более простой способ.

Спасибо.

Ответ №1:

Вам нужно добавить оболочку, переместить ее, а затем установить overflow: hidden .

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

Вот демонстрация
http://jsfiddle.net/n8LWF /

Ответ №2:

W3C даст вам ответ

 <shadow> = inset? amp;amp; [ <length>{2,4} amp;amp; <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;