溢出隱藏邊框

Question

這是我試圖修改滑塊： http://webkunst.comeze.com/

這是我想達到與邊境溢出：

的問題是，我嘗試了一切，使圖像與容器溢出一起工作：隱藏但不可能，我嘗試了所有容器div的相對位置，等等。

有人可以幫我嗎？透明邊界不是必須的，但最重要的是讓溢出隱藏工作與邊界。

這是標記：

<div id="home_slider"> 
    <ul id="slides"> 
     <li class="home_slide"><img src="images/slide1.jpg" alt=""></li> 
     <li class="home_slide"><img src="images/slide2.jpg" alt=""></li> 
     <li class="home_slide"><img src="images/slide3.jpg" alt=""></li> 
     <li class="home_slide"><img src="images/slide4.jpg" alt=""></li> 
    </ul> 
</div> 

和CSS：

#home_slider { 
     margin: 0 auto; 
     width: 880px; 
     height: 416px; 
     position: relative; 
     z-index: 5; 
     overflow: hidden; 
    } 
    #home_slider ul#slides { 
     list-style: none; 
     position: relative; 
     overflow: hidden; 
     border-radius: 20px; 
    } 
    #home_slider ul#slides li { 
     margin: 0; 
     width: 900px; 
     height: 416px; 
    } 
    .home_box { 
     margin-top: 30px; 
     float: right; 
    } 
    .home_box .home_image { 
     float: left; 
     border: 3px solid #6f6f6f; 
     -webkit-border-radius: 20px; 
     -moz-border-radius: 20px; 
     border-radius: 20px; 
     overflow: hidden; 
     margin-left: 13px; 
    } 

我從本教程中的滑塊： http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

Answer 1

你只需要到border-radius適用於#home_slider而不是#home_slider ul#slides。對於透明邊框，可以使用RGBA，你需要將它應用到#home_slider還有：

#home_slider { 
    margin: 0 auto; 
    width: 880px; 
    height: 416px; 
    position: relative; 
    z-index: 5; 
    overflow: hidden; 
    border-radius: 20px; /* add this */ 
    border: 15px solid rgba(255, 255, 255, 0.5); /* add something like this for the transparent border */ 
} 

編輯：看來時的元素不是position:static Chrome無法夾內容到一個border-radius。但是，如果你能活着，而不透明邊框，那麼你可以在此之上添加到相同的規則，以獲得圓角，但是你必須刪除邊框：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);