需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：img { border-radius: 20px}。
3、浏览器运行index.html页面，此时页面插入的图片会自动显示圆角20px的。
CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
代码实例：border-radius: 15px
1、把下列代码添加进入你的<style>标签内
2、清空缓存，看看效果吧（部分IE版本可能不支持）
预览
总结
这是个很实用的方法，可以让图片看起来更「精巧」一些
我说两种方法哈：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的边界的
