盒子阴影效果不适用于幻灯片

我有一个非常简单的滑块，我试图在此链接http://www.paulund.co.uk/creating-different-css3-box-shadows-effects上实现幻灯片中所有图像的＃5。我没有太多的运气！我什么都得不到。感谢您提前提供任何帮助。盒子阴影效果不适用于幻灯片

幻灯片CSS：

.blueberry { margin: 0 auto; padding-bottom:25px; width:auto;} 

.blueberry .slides { 
    display: block; 
    position: relative; 
    overflow: hidden; 
} 

.blueberry .slides li { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

.blueberry .slides li img { 
    display: block; 
    width: 100%; 
    max-width: none; 
} 

.blueberry .slides li.active { display: block; position: relative; } 
.blueberry .crop li img { width: auto; } 

.blueberry .pager { 
    height: 40px; 
    text-align: center; 
} 

.blueberry .pager li { display: inline-block; } 
.blueberry .pager li a, 
.blueberry .pager li a span { 
    display: block; 
    height: 4px; 
    width: 4px; 
} 

.blueberry .pager li a { 
    padding: 18px 8px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    -o-border-radius: 6px; 
    -ms-border-radius: 6px; 
    -khtml-border-radius: 6px; 
    border-radius: 6px; 

} 

.blueberry .pager li a span { 
    overflow: hidden; 
    background: #c0c0c0; 
    text-indent: -9999px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    -o-border-radius: 2px; 
    -ms-border-radius: 2px; 
    -khtml-border-radius: 2px; 
    border-radius: 2px; 

} 

.blueberry .pager li.active a span { 
background: #404040; 

} 

.shadow:before, .shadow:after 
{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 25px; 
    left: -25px; 
    width: 50%; 
    top: 80%; 
    max-width:400px; 
    background: #777; 
    -webkit-box-shadow: 0 35px 20px #777; 
    -moz-box-shadow: 0 35px 20px #777; 
    box-shadow: 0 35px 20px #777; 
    -webkit-transform: rotate(-8deg); 
    -moz-transform: rotate(-8deg); 
    -o-transform: rotate(-8deg); 
    -ms-transform: rotate(-8deg); 
    transform: rotate(-8deg); 
} 

.shadow:after { 

    -webkit-transform: rotate(8deg); 
    -moz-transform: rotate(8deg); 
    -o-transform: rotate(8deg); 
    -ms-transform: rotate(8deg); 
    transform: rotate(8deg); 
    right: 10px; 
    left: auto; 
}

HTML：

<div class="blueberry"> 
    <ul class="slides shadow"> 
    <li><img src="images/avatar.jpg" /></li> 
    <li><img src="images/ironman.jpg" /></li> 
    <li><img src="images/tron.jpg" /></li> 
    <li><img src="images/greenhornet.jpg" /></li> 
    </ul> 
</div>

来源

2013-01-08 user1913714

您需要的类 “活动” 适用于礼的什么都看不到一个。然后返回该网站并查看阴影效果的前/后代码。它目前不在你的CSS中的任何地方

好的，很酷。看看Wolf的jsfiddle，注意到这个影子被应用到h3上，而不是图像或li本身。如果你把它应用到李，你会得到一些非常怪异的怪异。

来源

2013-01-08 18:19:08

我添加它这里 - 请参阅更新 – user1913714

我直接应用于影子蓝莓类和它的工作就像一个魅力。谢谢！我试图将它应用于李和img。我没有足够的声望投票你或我会。 – user1913714

尝试demo here

在这里，我已经修改了CSS类box

.box { 
    width:70%; 
    height:200px; 
    background:#FFF; 
    margin:40px auto; 
    background-image:url('http://unleashthefanboy.s3.amazonaws.com/wp-content/uploads/2012/05/MARK2.jpg'); 
    background-color:#cccccc; 
    background-size:100%; 
}

来源

2013-01-08 18:28:38 Wolf

盒子阴影效果不适用于幻灯片

回答

相关问题