围观一堆坑货。人家说的是CSS实现。
CSS3以下的是几乎无法实现的(可以利用.HTC这种古董东西)
实现代码(简化过了，只包含关键代码，不可直接使用)：
<!DOCTYPE html><!-- 上面的DocType是HTML5声明防止某些浏览器不识别，旧版本IE(低于或者等于IE8)无效 -->
<div class="outer">
<div class="inner">
</div></div> .outer {
background:pink
width:100%height:100%
position:relative
}
/* 为了实现透明效果我们要有个背景 */
.inner {
background:black
width:300pxheight:300px
position:absolute
border-radius:100%
behavior:url(yourbehavior.htc)
}
/* 用CSS3新特性圆角来做出圆形效果，border-radius设定为100%为完全圆角(把整个元素变成椭圆形，如果是像素则会制作出一个绝对正圆的圆角，类似圆角长方形或者香肠形)。
宽高必须相等才是正圆。
位置相对定位来保证圆的位置，本例随便做的位置。
behavior是IE低版本的一个绘图功能组件，现在网上有许多可以现成使用的behavior，例如PIE.htc，挑选一个能实现圆角效果并且最适合你的插件来安装使用 */
当然，PNG实现是最简单的，也是最不负责的
圆角主要是通过border-radius 来实现：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许为元素添加圆角边框。
简单的例子，仅供参考：
<style>.box {margin:100 auto width:200px height:200px position:relative}
.shadow {width: 200px height:200px background:#ccc border-radius:10px}
.xxx {width:150px height:150px background:red position:absolute}
</style>
<body>
<div class="box">
<div class="shadow"></div>
<div class="xxx"></div>
</div>
</body>
css3的圆角样式border-radius就可以做到了，
圆形，就把四个角都设置成宽高的一半，就是50%，或者是固定值，，
注意的是，如果你是直接用Img标签的话，那你的Img
宽高要一样，就是说要是正方形，
如果你是通过容器来实现的话，你就直接把容器设置成正方形，border-radius:50%然后再background图片就可以了。
