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

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

title-20171227

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

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2017-12-27-17-19-12

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

result2

Leave a Reply