html5设置圆形图片2种方法

1.此方法适合正方形图片,如果是长方形会把图片压缩.

两个案例一样;

<img id="imgPhoto" style="position: absolute;top: 20px; right: 10px;border-radius: 25px;border: none;" width="50px" height="50px" src="http://www.jinlanyun.com/static/img/teacherimg/201412261506117887.jpg" />
<img id="imgPhoto" style="position: absolute;top: 100px; right: 10px;border-radius: 25px;border: none;" width="50px" height="50px" src="http://b.hiphotos.baidu.com/image/pic/item/8435e5dde71190ef772420c0cc1b9d16fcfa60d5.jpg" />


2.此方法适合大部分图片,会显示长方形图片的一部分,以圆形显示出来;

转自:http://blog.csdn.net/dingzongyinnihao/article/details/39295231


<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>

</html>



/***设置图片铺满,适合手机,电脑等各个浏览器**/

[css]  view plain copy
  1. #mobilebg{backgroundurl('../image/open/one_bg.png'no-repeat; -moz-background-size100% 100%; background-size100% 100%padding-left:50px;  padding-top:70px;}  



你可能感兴趣的:(html5设置圆形图片2种方法)