框阴影，边框不显示在元素的顶部

Question

好吧，我有一个使用公共jquery脚本的轮播滑块，看起来我正在处理滑块盒子样式的一些问题。

一切都很好，除了边框和阴影没有出现在盒子的顶部和底部。 （就像在那里切割一样）。

我试图在我的ul或填充上添加更大的高度，在li上也没有。似乎没什么用。

这是HTML：

<div class="carousel">
      <ul id="carousel-list">
        <li>
            <img src="img/img1.png" width="200" height="150" />
            <div class="mask">
            <a href="#" class="info">+</a> </div>
        </li>
        <li> 
            <img src="img/img2.png" width="200" height="150" />
            <div class="mask">
            <a href="#" class="info">+</a> </div>
        </li>
        <li> 
            <img src="img/img3.png" width="200" height="150" />
            <div class="mask">
            <a href="#" class="info">+</a> </div>
        </li>
        <li> 
            <img src="img/img4.png" width="200" height="150" />
            <div class="mask">
            <a href="#" class="info">+</a> </div>
        </li>
        <li> 
            <img src="img/img5.png" width="200" height="150" />
            <div class="mask">
            <a href="#" class="info">+</a> </div>
        </li>
        <li> 
            <img src="img/img6.png" width="200" height="150" />
            <div class="mask">
            <a href="#" class="info">+</a> </div>
        </li>
        <li> 
            <img src="img/img6.png" width="200" height="150" />
            <div class="mask">
            <a href="#" class="info">+</a> </div>
        </li>
      </ul>
      <a href="#" class="prev-btn">Prev</a>
      <a href="#" class="next-btn">Next</a>
  </div>

这里的CSS（我认为是问题）：

- ＆GT;我现在知道它有点脏，我应该在发现盒子有什么问题时立即清理它。

.carousel {
    width:870px;
    position:relative;
}

.carousel ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    display: block;
    overflow:hidden;
}

.carousel ul li {
    float:left;
    padding:0;
    margin:0 14px 0 0;
    overflow: hidden;
    position: relative;
    left:2px;
    text-align: center;
    cursor: default;

    box-shadow: 0 0 6px rgba(0,0,0, .2), 0 0 0 1px #d6d6d6;
    border: solid #fff 3px;
}

.carousel ul li:last-child {
    margin-right:0; 
}

a.next-btn, a.prev-btn {
    position:absolute;
    top:-58px;
    left:788px;
    width:39px;
    height:25px;
    display:block;
    text-indent:-9999px;
}

a.next-btn {
    left:830px; 
    background-image:url(../img/carousel-next.png);
}

a.next-btn:hover {
    background-image:url(../img/carousel-next-hover.png);
}

a.prev-btn {
    background-image:url(../img/carousel-prev.png);
}

a.prev-btn:hover {
    background-image:url(../img/carousel-prev-hover.png);
}

.carousel ul li:hover {
    box-shadow: 0 0 12px rgba(0,0,0, .3), 0 0 0 1px #d6d6d6;
}

.carousel ul li img {
    width: 200px;
    height: 150px;
    display: block;
    float: left;
    position: relative;
}

.carousel ul li .mask {
   width: 200px;
   height: 150px;
   overflow: hidden;
   position:absolute;
   top: 0;
   left: 0;

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(255,102,0, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

.carousel ul li:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

.carousel ul li a.info {
    font-family: 'PT Sans', sans-serif;
    font-size:1.063em;
    display: inline-block;
    margin:auto;
    padding: 3px 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.carousel ul li a.info:hover {
    background: rgba(255, 255, 255, 0.8);
    color:#ff6600;
    text-shadow:none;

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.carousel ul li:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

以下是该问题的图片：i.stack.imgur.com/Sh9K4.png

提前谢谢你，我希望这只是我错过的东西，可以轻松修复！