使用CSS创建径向图像

Question

在页面上实现图像时，我想将它们放在像

这样的圆圈中

但是它们的默认形式是一个矩形。我想把他们的形式改成一个圆圈。 示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我该怎么做？

Answer 1

添加边框半径应该是您要求的。

＆＃13;

＆＃13;

img{
  border-radius: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

最简单的方式

img {
    border-radius: 50%;
}

Answer 3

您需要将border-radius:50%提供给img

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;