CSS中,我們可以使用border-radius
屬性將圖片變成圓形,以下是一個(gè)簡(jiǎn)單的示例:
<img src="image.jpg" style="border-radius: 50%;">
在這個(gè)示例中,我們首先將圖片路徑賦值給src
屬性,然后通過(guò)內(nèi)聯(lián)CSS將border-radius
屬性設(shè)置為50%
,由于border-radius
屬性的值超過(guò)了其寬度和高度的一半,圖片將變成完全的圓形。
如果你想要更***地控制圓形的尺寸,你可以使用width
和height
屬性來(lái)設(shè)置圖片的寬度和高度。
<img src="image.jpg" style="width: 200px; height: 200px; border-radius: 100px;">
在這個(gè)示例中,我們將圖片的寬度和高度都設(shè)置為200像素,并將border-radius
屬性設(shè)置為100像素,由于border-radius
屬性的值超過(guò)了其寬度和高度的一半,圖片將變成完全的圓形,并且圓形的尺寸將被***地控制。
如果圖片的寬度和高度不同,那么生成的圓形將不再是***的圓形,而是會(huì)呈現(xiàn)出橢圓形的形狀,在使用border-radius
屬性時(shí),請(qǐng)確保圖片的寬度和高度是相等的。