Css框阴影提升到左下角

在过去的一个小时里，我一直在想如何使用box shadow来提升div的左角。这就是我想要实现的目标，第三点：。我知道有些帖子向你展示了如何去做，但我已经尝试了所有的方法，但似乎没有任何效果，这让我相信我的代码有问题。如果能帮我找出错误，我将不胜感激，谢谢

html

---

这是我的示例：

http://jsfiddle.net/j4naA/

在这里，我尽了最大努力复制了当时的阴影

jsFiddle：

Html:

---

如果无法访问正在加载的实际图像（而不是“$thumbnail”），您的小提琴将无法工作。抱歉，响应太晚。这行吗？我很抱歉反应太晚。我一直在为期末考试学习，几天没上了。这很好用。你不知道你得到了多少帮助。非常感谢你！

<img class='lazy image effect3' src='http://pearlsquirrel.com/images/lazyload.png' original-src='http://pearlsquirrel.com/profilethumbnails/$thumbnail' width='180' height='180' alt='PearlSquirrel'/>

.image {
-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
position:relative;
padding:2px;
background:#fcfcfc;
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
-o-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
}
.effect3
{
position: relative;
}
.effect3:before
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
 top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
 box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
 }

<div class="effect3" style="margin:20px;">
<img class="effect3" src="http://0777.ir/img/lndl.png"         
original-src="http://pearlsquirrel.com/profilethumbnails/$thumbnail" 
width="180" height="180" alt="PearlSquirrel"/>
</div>​

    .effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:155px;
  max-height:18px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}​