css如何把图片圆形

html-css017

css如何把图片圆形,第1张

<div style="width:100pxheight:100pxborder-radius:50%overflow:hidden">

<img src="">

</div>

需要浏览器支持CSS 3 ,注意div的宽高要一样,也可以直接把样式添加在img上,但不建议那样

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:img { border-radius: 20px}。

3、浏览器运行index.html页面,此时页面插入的图片会自动显示圆角20px的。

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

代码实例:border-radius: 15px

1、把下列代码添加进入你的<style>标签内

2、清空缓存,看看效果吧(部分IE版本可能不支持)

预览

总结

这是个很实用的方法,可以让图片看起来更「精巧」一些