CSS怎么弄圓形圖片?
img { border-radius: 50%; }
上述代碼是將圖片的邊框半徑設(shè)置為50%的圓形,這樣就可以實(shí)現(xiàn)圓形圖片的效果了。
如果想給圓形圖片添加邊框,則可以在CSS代碼中加入border屬性,具體可參考以下示例:
img { border-radius: 50%; border: 2px solid #000000; }
這樣設(shè)置的效果就是一個(gè)黑色邊框的圓形圖片。
需要注意的是,該方法只適用于正方形圖片。如果要將非正方形圖片設(shè)為圓形,則可以設(shè)置寬高相等,并且使用object-fit屬性,具體代碼如下:
img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
其中,object-fit: cover的作用是將圖片按比例縮放至覆蓋容器,并保持圖片寬高比不變。
總之,通過CSS設(shè)置圓形圖片是很簡單的,只需要幾行CSS代碼即可實(shí)現(xiàn)圓形圖片的效果。