css讓內層圖片符合外框圓角 | Forcing child to obey parent's border-radius in CSS

自從css可以設定外框圓角border-radius之後，網頁上物件又可以有更多的變化，這一篇要介紹在多層物件的最外層設定圓角後，怎麼讓內層的物件都隨著有圓角。

<div id="imageContainer">
    <img src="http://staging.ja-anything.com/wp-content/uploads/2017/12/circle_colorful.png">
</div>

#imageContainer {
    background-color: #333;
    width: 350px;
    height: 200px;
    border-radius: 5px;
}

上面這段程式碼會呈現的效果是樣這樣

這時候內層的圖片因為比外層物件大張，所以會超出外層的範圍。只要在外層物件加入overflow:hidden;的屬性，內層物件就只會顯示跟外層物件一樣大的範圍了。

#imageContainer {
    background-color: #333;
    width: 350px;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
}

JA-Anything