薇曉朵 側邊欄 「最新評論」 的使用者頭像是圓形的，很多人問我怎麼把頭像變成圓形的，這裡直接回復一下。圓形頭像，其實頭像圖片本身還是方形的，是用 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);

}