html5设置圆形图片2种方法

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

两个案例一样;

<img style="position: absolute;top: 20px; right: 10px;border-radius: 25px;border: none;" width="50px" height="50px" src="https://www.n-1.cn/erhuo.jpg" />
<img style="position: absolute;top: 100px; right: 10px;border-radius: 25px;border: none;" width="50px" height="50px" src="https://www.n-1.cn/erhuo.jpg" />

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

<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="https://www.n-1.cn/erhuo.jpg" />
</div>
 </figure>
 </div>
    </body>
</html>
本文作者:酷酷的二货

本文链接:https://www.n-1.cn/153.html

版权声明:所有文章均采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。

如果博客部分文章出现空白或异常,请留言或者联系博主修复。
最后修改:2019 年 09 月 19 日 09 : 12 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论