在当前潮流的趋势中，对于用户头像的展示一般都是设计成圆形图层的展现形式，如果是在网页上进行展示，我们可以通过css3的将头像包在一个方形的div中，然后设置 border-radius的值为头像的边长相等便可。

1
2
3
4
5

div {
    width: 92px;
    height: 92px;
    border-radius: 92px;
}

但是如果是在图片合成的时候，需要将头像合到一个预先挖好一个圆坑的底图中，又该如何做呢? 比如有如下的底图和用户头像:

现在需要将后面的头像图片替换掉底图中被框起来的部分，采用的步骤基本如下:

1. 将头像缩放到底图中的头像框大小
2. 将缩放后的头像进一步变成圆形图片
3. 将图像头像覆盖到底图的头像框上

抛开缩放和覆盖(即打水印)不表，那么问题来了：如何将方形的图像变为一个圆形图像呢？

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy