特殊な影の作成方法ですが、実のところは複数の図形を重ね合わせ、z-indexで前後関係を調整することで、効果を実現しています。

HTML：

<li><img src="img/1.gif" alt="img" /></li>

CSS：

li::after {
  content: "";
  width: 90%;
  height: 80%;
  left: 1.6%;
  bottom: 4.6%;
  position: absolute;
  background-color: transparent;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
  -webkit-transform: rotate(-4deg) skew(-8deg);
  -moz-transform: rotate(-4deg) skew(-8deg);
  -ms-transform: rotate(-4deg) skew(-8deg);
  -o-transform: rotate(-4deg) skew(-8deg);
  transform: rotate(-4deg) skew(-8deg);
  z-index: -1;
}
li::before {
  content: "";
  width: 90%;
  height: 80%;
  right: 1.6%;
  bottom: 4.6%;
  position: absolute;
  background-color: transparent;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
  -webkit-transform: rotate(4deg) skew(8deg);
  -moz-transform: rotate(4deg) skew(8deg);
  -ms-transform: rotate(4deg) skew(8deg);
  -o-transform: rotate(4deg) skew(8deg);
  transform: rotate(4deg) skew(8deg);
  z-index: -1;
}

要するに、2つの平行四辺形をそれぞれ左右に回転させて元の画像の下に配置し（以下の図を参照）、影を設定することで、最終的に画像のような影の効果を実現します。 こちらをクリックしてデモを確認できます