使用CSS創建

Question

實現頁面上的圖像時

徑向圖像，我希望把他們轉了一圈像

但其默認形式爲矩形。我想改變他們的形式爲一個圓圈。 例：

<p> 
 
Current: 
 
</p> 
 

 
<img src="https://cdn.discordapp.com/attachments/316916526760591362/392232736468762625/unknown.png"> 
 

 
<p> 
 
Desired: 
 
</p> 
 

 
<img src="https://cdn.discordapp.com/attachments/316916526760591362/392237925942951936/unknown.png">

我怎樣才能做到這一點？

Answer 1

添加邊框半徑應你的要求。

img{ 
 
    border-radius: 100%; 
 
}

<img src="https://placeimg.com/128/128/animals?t=1513587750720"/>

Answer 2

最簡單的方法

img { 
    border-radius: 50%; 
} 

Answer 3

你需要給border-radius:50%到img

img { 
 
width:100px; 
 
height:100px; 
 
border-radius:50%; 
 
}

<p> 
 
Current: 
 
</p> 
 

 
<img src="https://cdn.discordapp.com/attachments/316916526760591362/392232736468762625/unknown.png"> 
 

 
<p> 
 
Desired: 
 
</p> 
 

 
<img src="https://cdn.discordapp.com/attachments/316916526760591362/392237925942951936/unknown.png">