<img src="">
</div>
需要浏览器支持CSS 3 ，注意div的宽高要一样，也可以直接把样式添加在img上，但不建议那样
围观一堆坑货。人家说的是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实现是最简单的，也是最不负责的
1、首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：
2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：
3、最后打开浏览器，就可以看到圆角边框了：
