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

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

<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;
}

上面這段程式碼會呈現的效果是樣這樣
%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2017-12-27-17-19-12
這時候內層的圖片因為比外層物件大張,所以會超出外層的範圍。只要在外層物件加入overflow:hidden;的屬性,內層物件就只會顯示跟外層物件一樣大的範圍了。

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

result2

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *