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; }