html圆形头像的制作

时间:2024-03-01 10:14:07

<html>
<head>
<title>圆形头像的制作</title>

<style type="text/css">
.imgtest{margin:10px 5px;
overflow:hidden;}
.list_ul figcaption p{
font-size:12px;
color:#aaa;
}
.imgtest figure div{
display:inline-block;
margin:5px auto;
max-width:200px;
height:200px;
<!-- border-radius:100px; 此行代码让图片变圆 -->
border:2px solid #fff;
overflow:hidden;
-webkit-box-shadow:0 0 3px #ccc;
box-shadow:0 0 3px #ccc;
}
.imgtest img{width:100%;
min-height:100%; text-align:center;}
</style>
</head>
<body >

<div class="imgtest">

<figure>

<div>
<img src="http://db.zsmy.cn:8088/upload/authPic/2016/7/19/14689086514144647" />
</div>
</figure>
</div>

</body>
</html>