css如何把图片圆形

html-css029

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的。

我说两种方法哈:

1、上层DIV和img标签都设置border-radius圆角

列:

css如下:

.div1{width:100pxheight:100pxborder:1px solid lightgrayborder-radius:5px}

.div1 img{width:100pxheight:100pxborder-radius:5px}

html如下:

<div class="div1">

<img src="img1.jpg">

</div>

2、img不设置,div设置border-radius圆角并且设置超出部分影藏

css如下:

.div1{width:100pxheight:100pxborder:1px solid lightgrayborder-radius:5pxoverflow:hidden}

html如下:

<div class="div1">

<img src="img1.jpg">

</div>

注意:img标签要设置大小哈,不然图像显示会超出DIV的边界的