CSS是一種用于設(shè)計(jì)網(wǎng)頁樣式的語言,它可以幫助我們實(shí)現(xiàn)很多效果。其中一個(gè)常見效果就是圖片適應(yīng)邊框圓角,下面我們來介紹一下如何實(shí)現(xiàn)。
.border-radius { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; } .border-radius img { width: 100%; }
首先,我們需要給包裹圖片的 div 加上border-radius: 50%
,這樣就可以實(shí)現(xiàn)圓形的邊框。同時(shí),將其overflow
屬性設(shè)置為hidden
,這樣圖片就不會(huì)超出圓形邊框。
然后,我們需要將圖片的寬度設(shè)為100%,這樣圖片就會(huì)自適應(yīng)圓形的邊框。
以上就是實(shí)現(xiàn)圖片適應(yīng)邊框圓角的方法,希望對你有所幫助。
上一篇java讀取和返回圖片
下一篇css圖片星光閃爍效果