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