html实现圆形图片
在学习前端的过程中，我发现了一个很有趣的例子，对图像以圆形显示，div和a属性却又不一样的效果和操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆形头像实现</title>
<!-- <link rel="stylesheet" href="css/mypage.css" /> -->
</head>
<body>
<p>div例子</p>
<div style="width:100px; height:100px; border-radius:100%; overflow:hidden;">
<img src="images/o.jpg" alt="">
</div>
<br />
<p>a属性不固定位置</p>
<a href="#" style="width:100px; height:100px; border-radius:100%; overflow:hidden;">
<img src="images/o.jpg" alt="">
</a>
<br />
<p>a属性固定位置</p>
<a href="#" style="position: fixed; top: 70%;left: 10%; width: 100px; height:100px; border-radius:100%; overflow:hidden;">
<img src="images/o.jpg" alt="">
</a>
</body>
</html>
效果图：