css处理图片为圆形的方法
墨初 Web前端 322阅读
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元素设置为圆形的。