css处理图片为圆形的方法

css是前端不可缺少的部份，它可以规定html页面中div的大小，字体的样式颜色等等。而我们平时在网页上常见的圆形图片也是通过css来规定的，通过css的属性来告诉浏览器，将图片渲染为圆形。

css处理图片为圆形的方法

css属性中border-radius属性，可以规定div元素或一些图片的边角弯曲程度，如果弯曲的角度更大可以组合为圆形。

css处理图片为圆形的方法：

例1：

<img src="https://www.73so.com/artimgs/php_2.png" >
<style>
img{
border-radius: 100%;
overflow: hidden;
}
</style>

注：如果图片为正方形，则渲染出来的图片为正圆形。如果为长方形，则渲染出来的图片为椭圆形。

例2：

<div></div>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 100%;
overflow: hidden;
}
</style>

注：除了将图片设置为圆形外，还可以将div元素设置为圆形的。