css将方的图片变成圆的

CSS如何使用border-radius属性将方形图片变成圆形呢？下面就让我们来了解一下：

img{
    border-radius: 50%;  /*将图片的边框半径设置为50%即可实现圆形*/
}

border-radius是CSS3新增的属性，用于设置圆角边框半径。除了使用百分比值，还可以使用具体像素值来设置边框半径。对于设置为50%的圆形元素，其宽高必须相等，否则呈椭圆形。

除了将图片变成圆形，我们还可以将其他元素变形，比如将按钮变成圆形：

button{
    border-radius: 50px;  /*将按钮的边框半径设置成50像素即可实现圆形*/
}

上述代码将按钮的边框半径设置为50像素，可以实现一种略带倒角的圆形效果。除此之外，border-radius还可以选择某个角进行圆角处理，比如将左上角和右下角设置为圆角：

div{
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

上述代码将一个div元素的左上角和右下角设置为30像素的圆角，留下了右上角和左下角的直角。