使用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">