Question

我正在使用Owl Carousel作为我的主页滑块，但我想在滑块的图像部分周围添加边框。如果我在整个猫头鹰主题类上放置一个图像 - 它也会将它放在下一个和上一个按钮周围。

我还尝试将边框放在“owl-wrapper-outer”类周围，这是自动生成的，但它最终会将图像边框放在容器内部，一旦向左滚动，左边边界的一侧会留在图像中以下是检查器中显示的代码：

<div id="owl-demo" class="owl-carousel owl-theme" style="display: block; opacity: 1;">
<div class="owl-wrapper-outer">
    <div class="owl-wrapper" style="width: 4206px; left: 0px; display: block;">
        <div class="owl-item" style="width: 701px;">
            <div class="item">
                <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg" alt="The Last of us">
            </div>
        </div>
        <div class="owl-item" style="width: 701px;">
            <div class="item">
                <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg" alt="GTA V">
            </div>
        </div>
        <div class="owl-item" style="width: 701px;">
            <div class="item">
                <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg" alt="Mirror Edge">
            </div>
        </div>
    </div>
</div>
<div class="owl-controls clickable">
    <div class="owl-pagination">
        <div class="owl-page active"><span class=""></span>
        </div>
        <div class="owl-page"><span class=""></span>
        </div>
        <div class="owl-page"><span class=""></span>
        </div>
    </div>
    <div class="owl-buttons">
        <div class="owl-prev">prev</div>
        <div class="owl-next">next</div>
    </div>
</div>

这里有一个jsfiddle，基本上是我在页面上的内容，我试图在图像部分放置一个边框，但不是“下一个”和“上一个”按钮。

http://jsfiddle.net/mX455/6/

Answer 1

这不是边界问题，因为边界正在按照预期运作。这是一个填充问题。

允许图像流过填充物。

您需要做的是更新它，以便使用边框和实心框阴影。

.owl-wrapper-outer {
    border: 8px solid red;
    box-shadow: 0px 0px 0px 10px #888888;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

JSFiddle

Answer 2

JSFiddle：它不适用于“插入”阴影。

在旋转木马的图像部分周围添加边框

2 个答案: