Добавить рамку вокруг изображения часть карусели

Question

Я использую Сову Карусель в качестве слайдера моей домашней страницы, но я бы хотел поместить границу вокруг секции изображения слайдера. Если я поместил изображение вокруг всего класса совой-темы, он также разместит его вокруг следующей и предыдущей кнопок.

Я также попытался поместить границу вокруг класса «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 по сути то, что у меня есть на моей странице, и я пытаюсь поставить рамку вокруг части изображения, но а не кнопки «next» и «prev».

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: Это не работает "вставка" тени.