Css 制作圆形头像

最近留意到网上好多网站或者APP的用户头像都做成了圆形, 于是自己参考网上的案例并且结合自己的一些想法试着做了一个。

 

下面是瘠薄(图片):

Css 制作圆形头像

HTML代码:

  1. <img src="https://www.loveo.cc/wp-content/uploads/2016/10/MCTX.jpg" alt="示例图片" class="headPortrait" />

CSS代码:

  1. .headPortrait {
  2.     width:10rem;
  3.     height:10rem;
  4.     border-radius: 50%;
  5.     -moz-border-radius: 50%;
  6.     -webkit-border-radius: 50%;
  7.     box-shadow:0 0 0 2px #ececec,0 0 0 3px rgba(0,0,0,0.4);
  8. }

案例主要用到 CSS3 中 border-radius 元素圆角属性,HTML 结构要尽量简单,头像外围的阴影部分及边框可以用 box-shadow 搞定。(小提示:box-shadow 可以制作多重边框哦!)

 

See the Pen round-head by 墨丶水瓶 (@Nexiy) on CodePen.

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

目前评论:2   其中:访客  2   博主  0

  1. avatar Win7en乐园 0

    水墨风格浓厚呀,很不错。

  2. avatar 森纯博客 0

    技术啊

评论加载中...

发表评论取消回复

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: