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

我使用猫头鹰旋转木马作为我的主页的滑块，但我想在滑块的图像部分周围放置边框。如果我在整个猫头鹰主题类中放置一个图像，它也会将它放在next和prev按钮的周围。在旋转木马的图像部分周围添加边框

我也尝试在自动生成的“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/

来源

2014-06-06 BREAUXseidon

嗯，把边界放在猫头鹰包装外面似乎对我很好http://jsfiddle.net/j08691/mX455/4/ – j08691

为什么你不能只是添加一个边框到'＃猫头鹰 - 演示'css？ – Uxonith

对不起。我应该添加我使用的边框类型。这是一个更新的jsfiddle：http://jsfiddle.net/mX455/6/ 请注意，例如，左边框与第一张图片保持一致，所以当它向左滑动时，边框也会如此。 – BREAUXseidon

这不是一个边界问题，因为它的预期的边界正在工作。这是一个填充问题。

图像被允许流过填充。

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

.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

来源

2014-06-06 17:18:47

是的，我更新了我的jsfiddle，我正在尝试为我的边界取消。以下是我的：http://jsfiddle.net/mX455/6/ – BREAUXseidon

@BREAUXseidon更新了我的答案，以考虑您的新小提琴=） –

非常感谢！对此，我真的非常感激。 – BREAUXseidon

的jsfiddle：它不为 “插入” 影子工作。

来源

2014-09-25 12:18:16 ScriptFolder

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

回答

相关问题