CSS box-shadow VS 溢出隐藏

Question

我创建了一个旋转木马，我想在旋转木马项目上添加框阴影属性。这是不可能的，因为轮播的 overflow:hidden 属性.

有没有办法克服这个问题？

*Carousel 由于某种原因无法正常工作，但您仍然可以看到 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
    });
});

Answer 1

您可以在 .product-item 中添加另一个 div 并将阴影应用于由于包含 .product-item 的填充而应该可见的阴影。

Answer 2

（注意：前两个建议在底部。一旦 JS 运行，第一次尝试无效。第二次尝试有效，但不符合 OP 的设计限制评论。)

如果 .product-item 内边距和 .container 内边距相同，您将无法在每个 .product-item 周围显示可见的框阴影。但是，如果您使 .container 内边距大于 .product-item 内边距，则可以使用负值 margin-left 和 margin-right 将轮播的宽度扩展到其父元素之外。这允许您向 .item 添加填充以使阴影可见，同时将 overflow: hidden 保持在 .carousel-inner 上，这允许轮播执行其操作。

最简单的方法似乎是只更改 .container-inner 的样式。但是，由于轮播 JS 的工作方式，轮播幻灯片之间的过渡中断。

损坏fiddle: https://jsfiddle.net/80be2qoj/

作为解决方法，您可以在 #myCarousel 周围添加 .carousel-outer 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;
}

Fiddle: https://jsfiddle.net/cL4L8sd2/

编辑 1：

第一件事：旋转木马无法正常工作，因为您没有在 fiddle.

中启用 jQuery

您应该将填充添加到 .item，而不是 .carousel-inner。这按预期工作：

.item {
  padding: 25px;
}

工作fiddle：

https://jsfiddle.net/tcLk3tnx/

CSS box-shadow VS 溢出隐藏

CSS box-shadow VS overflow hidden

css

overflow

carousel

twitter-bootstrap-3

box-shadow