在旋轉木馬的圖像部分周圍添加邊框

我使用貓頭鷹旋轉木馬作爲我的主頁的滑塊，但我想在滑塊的圖像部分周圍放置邊框。如果我在整個貓頭鷹主題類中放置一個圖像，它也會將它放在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

在旋轉木馬的圖像部分周圍添加邊框

回答

相關問題