最近留意到网上好多网站或者APP的用户头像都做成了圆形, 于是自己参考网上的案例并且结合自己的一些想法试着做了一个。
下面是瘠薄(图片):
HTML代码:
- <img src="https://www.loveo.cc/wp-content/uploads/2016/10/MCTX.jpg" alt="示例图片" class="headPortrait" />
CSS代码:
- .headPortrait {
- width:10rem;
- height:10rem;
- border-radius: 50%;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- box-shadow:0 0 0 2px #ececec,0 0 0 3px rgba(0,0,0,0.4);
- }
案例主要用到 CSS3 中 border-radius
元素圆角属性,HTML 结构要尽量简单,头像外围的阴影部分及边框可以用 box-shadow
搞定。(小提示:box-shadow
可以制作多重边框哦!)
See the Pen round-head by 墨丶水瓶 (@Nexiy) on CodePen.
2016年11月08日 10:41 沙发
水墨风格浓厚呀,很不错。
2017年01月14日 17:36 板凳
技术啊