我创建了一个旋转木马，我想在旋转木马项目上添加box-shadow属性。这是不可能的，因为旋转木马的溢出：隐藏属性。
无论如何要克服这个问题吗？
*轮播由于某种原因无法正常工作，但无论如何你都可以看到css问题
HTML：
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
<h4><a href="#">Product Name</a></h4>
<div class="price">€ 25.00</div>
</div>
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
<h4><a href="#">Product Name</a></h4>
<div class="price">€ 25.00</div>
</div>
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
<h4><a href="#">Product Name</a></h4>
<div class="price">€ 25.00</div>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
<h4><a href="#">Product Name</a></h4>
<div class="price">€ 63.00</div>
</div>
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
<h4><a href="#">Product Name</a></h4>
<div class="price">€ 24.00</div>
</div>
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
Product Name</a>
</h4>
<div class="price">€ 25.00</div>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
<h4><a href="#">Product Name</a></h4>
<div class="price">€ 42.00</div>
</div>
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
Product Name</a>
</h4>
<div class="price">€ 25.00</div>
</div>
<div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
<h4><a href="#">Product Name</a></h4>
<div class="price">€ 54.00</div>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<div class="carousel-nav"> <a class="carousel-control prev" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control next" href="#myCarousel" data-slide="next"></a>
</div>
</div>
<!--/myCarousel-->
</div>
</div>
</div>
css（我没有在这里发布完整的css代码，因为它不可读，这里是关于这个问题的最重要的样式）：
.product-item {
position: relative;
padding-top: 20px;
}
.product-item:hover {
-webkit-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
z-index: 100;
}
JAVASCRIPT
jQuery('.carousel').each(function () {
jQuery(this).carousel({
interval: false
});
});
答案 0 :(得分：1)
您可以在.product-item中添加另一个div，并将阴影应用于由于包含.product-item的填充而应该可见的阴影。
答案 1 :(得分：1)
（注意：前两个建议位于底部。一旦JS正常运行，第一次尝试就不起作用。第二次尝试不起作用，但不适合OP＆＃39; s根据他们的评论设计限制。）
如果.product-item填充和.product-item填充相同，则您无法在每个.container周围显示可见的框阴影。但是，如果您使.container填充大于.product-item填充，则可以使用否定margin-left和margin-right来扩展其外部的轮播宽度父元素。这允许您向.item添加填充以使阴影可见，同时将overflow: hidden保持在.carousel-inner上，这允许轮播做其事。
最简单的方法似乎就是改变.container-inner的样式。但是，由于旋转木马JS的工作方式，旋转木马滑梯之间的过渡会中断。
破碎的小提琴：https://jsfiddle.net/80be2qoj/
作为一种解决方法，您可以在.carousel-outer周围添加#myCarousel div并执行以下操作：
https://jsfiddle.net/abfmatq6/
.container {
padding-right: 25px;
padding-left: 25px;
}
.carousel-outer {
margin-top: 20px;
padding: 18px 0;
border-top: 1px solid #b8bec2;
border-bottom: 1px solid #b8bec2;
}
.carousel.carousel {
margin-top: 0;
margin-left: -25px;
margin-right: -25px;
padding: 0;
border: 0;
}
.carousel-nav.carousel-nav {
bottom: -50px;
left: 15px;
}
.item {
padding: 25px;
}
原始建议
你可以添加一些填充到.carousel-inner。
.carousel-inner {
padding: 25px;
}
.product-item {
position: relative;
padding-top: 20px;
}
.product-item:hover {
-webkit-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
z-index: 100;
}
小提琴：https://jsfiddle.net/cL4L8sd2/
编辑1：
第一件事：旋转木马没有工作，因为你没有在小提琴中启用jQuery。
您应该将填充添加到.item，而不是.carousel-inner。这按预期工作：
.item {
padding: 25px;
}
工作小提琴：