CSS可以把方形圖片變成圓形,主要通過設(shè)置元素的形狀屬性來實現(xiàn),下面是一些示例代碼:
1、使用border-radius屬性:
.square-image { width: 100px; height: 100px; border-radius: 50%; }
2、使用mask屬性:
.square-image { width: 100px; height: 100px; mask: circle(50%); }
3、使用object-fit屬性:
.square-image { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; }
這些代碼可以將一個方形圖片變成一個圓形,border-radius屬性可以將元素的四個角都設(shè)置為圓形,mask屬性可以創(chuàng)建一個圓形蒙版,object-fit屬性可以將圖片裁剪并填充到元素中,同時配合border-radius屬性實現(xiàn)圓形效果。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時請以鏈接形式注明文章出處。