• 技术文章 >web前端 >css教程

    css如何实现圆形头像

    VV2020-11-18 10:59:28原创42

    css实现圆形头像的方法:可以通过直接设置img为圆形的方式来实现,如【border-radius: 30px;】。需要注意的是使用这种方式如果图片不是正方形,那么图片会被拉伸。

    可以通过如下两种方式来实现:

    方法一:直接设置img为圆形,这种情况下如果图片不是正方形,图片会被拉伸

    (学习视频分享:css视频教程

    <img class="circleImg" src="../img/photo/img.jpg"  />

    相应的css为:

    .circleImg{
      border-radius: 30px;
      width:60px;
      height:60px;
    }

    boder-radius为图片宽度的一半。

    方法二:通过背景图设置

    <div class="bgImg"></div>

    相应的css为:

    .bgImg{ 
      border-radius: 30px;
      width:60px;
      height:60px; 
      background: url("../img/photo/img.jpg") no-repeat center;
      background-size:60px;
    }

    拖图片不是方形,则按照宽度等比例显示,则background-size设置为图片宽度,高度为auto,若需要按照高度等比例显示,则background-size:auto 60px;。

    实现效果:

    9de7548423dc7402383f9a92970e0c9.png

    相关推荐:CSS教程

    以上就是css如何实现圆形头像的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css 圆形头像
    上一篇:css如何设置字体为微软雅黑 下一篇:css层叠样式表是什么
    第14期线上培训班

    相关文章推荐

    • 用photoshop制作一个漂亮的圆形头像• PS制作可爱的QQ圆形头像教程• 如何使用css实现一个圆形头像框• css伪类分为哪几种

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网