css 图片显示为圆形 |css动画应该注意什么软件

/* css代码 */
img {
border-radius: 50%;
}

上述代码的关键在于border-radius属性，这个属性用于设置元素的边框圆角半径。

当大家将这个属性设置为 50% 时，边框的圆角半径会自动被计算为图片宽度或高度的一半，从而使图片呈现出圆形的效果。

需要注意的是，如果图片本身不是正方形，使用这种方法将会导致图片变形。如果需要保持图片原始比例，可以将图片嵌套在一个正方形的容器中，并将容器设置为圆形。

/* css代码 */
.container {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.container img {
width: 100%;
height: auto;
}

上述代码中，大家首先创建了一个 200×200 的正方形容器，并将其设置为圆形。接着，在容器中嵌套了一个图片元素，并将其宽度设置为 100%，高度自动适应。

通过这种方法，即使图片不是正方形，也可以在保持原始比例的同时呈现圆形效果。