圆形头像图标运用border属性轻松实现
发布时间:2015-05-12 来源:查字典编辑
摘要:几乎所有应用的头像和图标除了方的还是方的,但从PATH开始,其出色的UI和交互让众多APP在前端设计上开始独下匠心。PATH中的用户头像图标...
几乎所有应用的头像和图标除了方的还是方的,但从PATH开始,其出色的UI和交互让众多APP在前端设计上开始独下匠心。PATH中的用户头像图标也开始了使用最美的图形——圆形,一改原来单调的方形。
虽然圆形的头像图标看起来很美很新颖,但是实现起来却是很简单,主要运用了border属性去限定头像图片的边界,从而将其规定为自己想要的形状。
所 用到的主要起作用的属性border-radius,用来设置或检索对象使用圆角边框。对于后面的参数,一个是如图例所使用的lenth,即对应的圆角半 径的长度,只要大于或等于你规定的尺寸,显示的便是圆;另一个参数的形式是用<percentage>,即用百分比设置圆角半径的长度。具体 实现代码很简单,简单几句如下:
html中的图片:
复制代码
相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
- ■Photoshop将普通的山峦图片调制成漂亮的朝霞色效果
- ■怎么卸载windows7系统中IE10避免出现白屏
- ■windows7系统硬盘分区(不伤害OEM预留分区和recovery分区)
- ■Win7自家OFFICE完美抠图(使用PPT删除图片背景)
- ■windows7系统使用过程中造成硬盘狂响的幕后黑手
- ■如何重设windows8系统主题颜色/计算机名字等等
- ■通过去掉写入权限实现禁止在windows7系统桌面上存放文件
- ■把各种对象(锁定)Pin到windows7系统任务栏中的方法
- ■windows7系统中怎么设置屏幕保护程序(三维文字)
- ■如何用好PS中的钢笔工具 Photoshop钢笔工具的使用介绍
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类