實現圓形的用戶頭像代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>頭像圓形化處理</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
#d1{
width: 100px;
height: 100px;
border: 1px solid blue;
border-radius: 100%;
overflow: hidden;
}
img {
max-height: 100%;
}
</style>
</head>
<body>
<div id="d1">
<img src="http://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/48540923dd54564e2d86086eb8de9c82d0584f82.jpg" alt="">
</div>
</body>
</html>
在<div>標籤中套一個<img>標籤，並且利用CSS設置外層<div>標籤的邊框大小和邊框樣式，在這裏通過border-radius:100%將邊框設置爲圓形，改變設定的數值大小就可以得到不一樣的邊框。
將邊框設置爲圓形後，還要對與overflow屬性進行設置，將overflow屬性設置爲hidden，這樣當圖片超出<div>標籤的width和height時就可以將超出的部分隱藏，形成圓形圖片的效果，效果圖如下：
