css如何把图片圆形

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

BODY里面的代码：

<ul class="sc1">

<li><a rel="sc" href="/p/uploadfile/201109/15/8712819728.jpg"><img src="80x80.jpg" alt="海洋之心"/><span></span></a></li>

</ul>

CSS代码：

img {border:0}

.sc1{padding:10px 0 45pxclear:bothwidth:930pxoverflow:hidden}

.sc1 li{float:leftwidth:80pxmargin:0 12px 12px 0display:inline}

.sc1 img{width:80pxheight:80pxdisplay:block}

.sc1 a:hover img{filter:Alpha(Opacity=60)opacity:0.6}

.sc1 a span,.sc1 a:hover span{position:relativemargin:-80px 0 0 0float:leftbackground:url(i.png) no-repeat_background:url(i.gif) no-repeatwidth:80pxheight:80pxcursor:pointer}

i.png 这个是圆角背景图片

最后效果如图：

楼主自己试一下。还不懂的给我留言！

---