圓形頭像圖標運用border屬性輕松實現

幾乎所有應用的頭像和圖標除了方的還是方的，但從PATH開始，其出色的UI和交互讓眾多APP在前端設計上開始獨下匠心。PATH中的用戶頭像圖標也開始了使用最美的圖形——圓形，一改原來單調的方形。

雖然圓形的頭像圖標看起來很美很新穎，但是實現起來卻是很簡單，主要運用了border屬性去限定頭像圖片的邊界，從而將其規定為自己想要的形狀。

所 用到的主要起作用的屬性border-radius,用來設置或檢索對象使用圓角邊框。對於後面的參數，一個是如圖例所使用的lenth,即對應的圓角半 徑的長度，只要大於或等於你規定的尺寸，顯示的便是圓；另一個參數的形式是用<percentage>，即用百分比設置圓角半徑的長度。具體 實現代碼很簡單，簡單幾句如下：

html中的圖片：
 

復制代碼 代碼如下:
<span class="content1-picture">
<img class="image" src="source/10.jpg" />
</span>

對應的CSS中：

復制代碼 代碼如下:
.image{
width:43px;
height:43px;
border-radius:50px;
}

當 然，這裡只是簡單的實現了一下下圓形的頭像圖形的小雛形，當然還可以采用更多的border屬性去美化圖標的邊框，像是漸變色等等，在此不必贅述，有興趣 可以參考下border的屬性http://www.w3school.com.cn/css3/css3_borders.asp寫出自己喜歡的形狀和 風格的頭像和圖標！