hi,欢迎访问本站!
当前位置: 首页Web前端正文

css处理图片为圆形的方法

墨初 Web前端 170阅读

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元素设置为圆形的。

标签:
声明:无特别说明,转载请标明本文来源!
相关推荐