在CSS中,我們可以輕松地將圖片設成圓形。這種效果可以通過圓形邊界半徑(border-radius)來實現。
img { border-radius:50%; }
以上代碼將會把圖片變成圓形,因為border-radius屬性設置了一個50%的值。這里的50%表示的是圖片邊界的半徑,使圖片呈現出圓形的形狀。
如果想要給圖片設置一個固定的大小,可以在CSS中指定寬度和高度,同時保持圓形的形狀。
img { width:150px; height:150px; border-radius:50%; }
上面的代碼將會在一個尺寸為150x150像素的圓形中顯示圖片。為了保持圓形,我們還需要將圓的邊界半徑設為50%。
除了使用border-radius屬性以外,我們也可以使用clip-path實現圓形圖片的效果。clip-path可以通過定義一個圓形路徑來裁剪圖片。
img { clip-path: circle(50% at center); }
以上的代碼將會使用clip-path屬性把圖片裁剪成一個圓形。圓形路徑的邊界半徑仍然是50%,而at center指定圓形的中心點為圖片的中心點。
無論是使用border-radius還是clip-path屬性來實現圓形圖片的效果,都能夠很容易地讓你的網站看起來更加美觀。