薇晓朵 侧边栏 「最新评论」 的用户头像是圆形的，很多人问我怎么把头像变成圆形的，这里直接回复一下。圆形头像，其实头像图片本身还是方形的，是用 CSS3 的 border-radius 属性做成圆形的。

圆形头像

实现圆形头像很简单，只需要打开当前主题根目录的 style.css，在最后边添加下边的代码：

/**

    *WordPress 圆形头像

    *https://www.weixiaoduo.com/round-avatar/

*/

img.avatar.photo {

    border-radius:100%;

    -moz-border-radius:100%;

}

保存之后所有的头像就都是圆形的了。

头像旋转

当前你把鼠标放到 薇晓朵 的圆形头像上的时候头像会旋转，非常帅，如果你也要旋转的效果，可以用下边的代码替换上边的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/**

    *WordPress 圆形头像

    *头像旋转

    *https://www.weixiaoduo.com/round-avatar/

*/

img.avatar.photo {

    border-radius:100%;

    -moz-border-radius:100%;

    transition:.5s;

    -webkit-transition:.5s;

    -moz-transition:.5s;

    -o-transition:.5s;

}

img.avatar.photo:hover {

    transform:rotate(720deg);

    -webkit-transform:rotate(720deg);

    -moz-transform:rotate(720deg);

    -o-transform:rotate(720deg);

    -ms-transform:rotate(720deg);

}