<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;
width:100px;
height:100px;
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="head.jpg" />
</div>
</figure>
</div>
</body>
<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;
width:100px;
height:100px;
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="head.jpg" />
</div>
</figure>
</div>
</body>
</html>
/***设置图片铺满,适合手机,电脑等各个浏览器**/
#mobilebg{background: url('../image/open/one_bg.png') no-repeat; -moz-background-size: 100% 100%; background-size: 100% 100%; padding-left:50px; padding-top:70px;}