005_HTML5/CSS3实现圆角图片剪裁

前言：

        咱们电脑上的图标，手机上的图标，几乎都是圆角的。为了用户的需求，也为了技术的全面，今天咱们来学习一下怎么使用HTML5/CSS3来实现圆角图片的剪裁。

---

---

---

---

原理：

        用一个img标签链接一张图片，然后使用css3的一个属性——border-radius来设置图片边角的弯曲度，从而达到圆形剪裁的效果。

---

---

---

---

border-radius：

        - 定义和用法

            border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

            提示：该属性允许您为元素添加圆角边框！

默认值：0继承性：no版本：CSS3JavaScript 语法：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