CSS中提供了一種將圖片變為圓角的方法,可以讓頁面看起來更加美觀。
/* 設置圖片為圓角 */ img { border-radius: 50%; }
其中,border-radius屬性用于設置邊框圓角半徑,設置為50%即可將圖片變為圓形。
如果想要將圖片變為其他形狀的圓角,可以調整border-radius值,例如:
/* 設置圖片為橢圓形 */ img { border-radius: 50% 20%; }
此時,圖片的上下圓角半徑為50%,左右圓角半徑為20%,形成了橢圓形。
需要注意的是,使用border-radius屬性設置圖片圓角時,需要確保圖片本身的寬高比與所設圓角的寬高比一致,否則圖片可能會被拉伸或壓縮。
通過CSS中的border-radius屬性,可以輕松將圖片變為各種形狀的圓角,為頁面增添美感。