Css框阴影解除左下角

我一直在试图弄清楚如何在过去一小时内使用阴影框提升div的左角。这是我想要完成的，第3项：http://www.paulund.co.uk/creating-different-css3-box-shadows-effects。我知道有帖子告诉你如何去做，但我已经尝试了一切，似乎没有任何工作，这导致我相信我的代码有问题。我将不胜感激任何帮助找到我的错误，谢谢。Css框阴影解除左下角

HTML

<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'/>

CSS

.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); 
}

这是我在这里的样品：http://jsfiddle.net/j4naA/

来源

2012-12-03 Eggo

没有进入实际图像加载（而不是 “$缩略图”），你的小提琴将无法正常工作。 –

对不起，迟到的回应。这是否工作？ http://pearlsquirrel.com/profilethumbnails/DJMediaz-08392713e56889a9fbbcaf7e18b2e331.png – Eggo

在这里，我做了我最擅长http://www.paulund.co.uk/creating-different-css3-box-shadows-effects复制的影子。

的jsfiddle：http://jsfiddle.net/j4naA/19/

HTML：

<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>

的CSS：

.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); 
}

来源

2012-12-03 23:45:25 NickTheGreat

我很抱歉迟到的回应。我一直在学习决赛，而且几天后我都没有参加。这工作完美。你不知道你有多少帮助。非常感谢！ – Eggo

Css框阴影解除左下角

回答

相关问题