前言：
咱们电脑上的图标，手机上的图标，几乎都是圆角的。为了用户的需求，也为了技术的全面，今天咱们来学习一下怎么使用HTML5/CSS3来实现圆角图片的剪裁。
原理：
用一个img标签链接一张图片，然后使用css3的一个属性——border-radius来设置图片边角的弯曲度，从而达到圆形剪裁的效果。
border-radius：
- 定义和用法
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框！
| 默认值： | 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.borderRadius="5px" |
大家注意到了，JavaScript也是可以去修改这个值的，今天我们直接 在css属性里操作，原理一致。
- 语法
border-radius: 1-4 length|% / 1-4 length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相 同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
| 值 | 描述 |
|---|---|
| length | 定义圆角的形状。 |
| % | 以百分比定义圆角的形状。 |
测试代码：
效果：
源码下载：
关注一下公众号，并回复：
HTML5/CSS3实现圆角图片剪裁.code