Отсекают тень коробок

При использовании CSS3 box-shadow У меня проблема, которую я обычно не делаю.

Тень коробки обычно просто просачивается по краям div, но не на этом.

box-shadow, который обрезается сверху и справа.

Вот что я использую для box-shadow:

-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
 box-shadow: 0 0 5px #555;

Приветствия

Ответы

Ответ 1

Если box-shadow отключается, убедитесь, что overflow:visible установлен на любом div (s), в котором содержится ваш элемент.

Ответ 2

Проблема заключается в том, что ваш центральный главный div обрезает край тени. Установите overflow:visible на это, и вы должны увидеть его.

Ответ 3

Я столкнулся с этой проблемой несколько раз с IE, и лучшим решением, которое я нашел, является использование прозрачного контура вокруг div. Это, по-видимому, мешает IE отсекать тень окна, так же как и в тех случаях, когда Gecko и Webkit этого не делают. Одна замечательная вещь об использовании контура для устранения этой проблемы заключается в том, что она не влияет на положение div.

Например, у меня был div, с которым я использовал position: absolute и bottom: -30px, чтобы поместить его в определенное место относительно своего родительского div. IE и только IE, отрезали верх и низ тени коробки. Добавление этого контура фиксировало его, не меняя положения.

outline: 10px solid transparent;

Ответ 4

вы можете правильно установить этот тег img стиля для отображения теневого поля

.img{
  margin:20px;
 -moz-box-shadow: 0 0 5px #555;
  -webkit-box-shadow: 0 0 5px #555;
  box-shadow: 0 0 5px #555;
 }

Ответ 5

используйте отступы + отрицательное поле, например:

.img {
  padding: 10px;
  margin: -10px;
}