только тень снизу css3

Question

Есть ли способ уронить тень только на дно ?. У меня есть меню с 2 изображениями рядом друг с другом. Я не хочу правильную тень, потому что она перекрывает правильное изображение. Я не люблю использовать изображения для этого, поэтому есть способ поместить его только внизу, например:

box-shadow-bottom: 10px #FFF; или аналогичный?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

Answer 1

обновите для кого-то еще свой ответ прозрачными сторонами вместо белого, чтобы он работал и на других цветных фонах.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

Answer 2

Если ваш фон сплошной (или вы можете воспроизвести его с помощью CSS), вы можете использовать линейный градиент следующим образом:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

Это создаст градиент 5px в нижней части элемента, от черного с непрозрачностью 30% до полностью прозрачного.Остальная часть элемента имеет белый фон.Конечно, изменяя последние 2 цветовых ограничителя линейного градиента, вы можете сделать фон полностью прозрачным.

Answer 3

внутренняя тень

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>