需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：img { border-radius: 20px}。
3、浏览器运行index.html页面，此时页面插入的图片会自动显示圆角20px的。
不好意思 看错了那样的话可以定位一个图片上去，
也可以定位一个大圆圈，漏出一个部分那个圆圈之后，在给他的父级一个overflow：hidden
把大圆圈不需要的部分隐藏就行了。
围观一堆坑货。人家说的是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实现是最简单的，也是最不负责的
