圆形头像图标简单实现
来源:互联网 发布:手机淘宝分期付款流程 编辑:程序博客网 时间:2024/06/13 21:32
几乎所有应用的头像和图标除了方的还是方的,但从PATH开始,其出色的UI和交互让众多APP在前端设计上开始独下匠心。PATH中的用户头像图标也开始了使用最美的图形——圆形,一改原来单调的方形。
虽然圆形的头像图标看起来很美很新颖,但是实现起来却是很简单,主要运用了border属性去限定头像图片的边界,从而将其规定为自己想要的形状。
所用到的主要起作用的属性border-radius,用来设置或检索对象使用圆角边框。对于后面的参数,一个是如图例所使用的lenth,即对应的圆角半径的长度,只要大于或等于你规定的尺寸,显示的便是圆;另一个参数的形式是用<percentage>,即用百分比设置圆角半径的长度。具体实现代码很简单,简单几句如下:
html中的图片:
<span class="content1-picture">
<img class="image" src="source/10.jpg" />
</span>
对应的CSS中:
.image{
width:43px;
height:43px;
border-radius:50px;
}
当然,这里只是简单的实现了一下下圆形的头像图形的小雏形,当然还可以采用更多的border属性去美化图标的边框,像是渐变色等等,在此不必赘述,有兴趣可以参考下border的属性http://www.w3school.com.cn/css3/css3_borders.asp写出自己喜欢的形状和风格的头像和图标!
- 圆形头像图标简单实现
- Android圆形头像(图标)的实现
- div+css简单实现圆形头像
- 自定义圆形头像图标控件
- 简单的圆形头像
- iOS实现圆形头像
- iOS实现圆形头像
- iOS实现圆形头像
- Android实现圆形头像
- 圆形头像显示实现
- 实现圆形头像效果
- iOS实现圆形头像
- CSS实现圆形头像
- css实现圆形头像
- BitmapShader实现圆形头像
- Android圆形头像实现
- 实现圆形头像
- android 实现圆形头像
- 配置JAVA的环境变量
- OSGI and C++
- 有关int,float,double型与字符串char*类型的相互转换
- document.write()及其样式、位置控制
- jquery的extend和fn.extend的使用说明
- 圆形头像图标简单实现
- 大话设计模式之抽象工厂模式
- 使用Uniread实现SQLplus翻页功能
- hdu 1392 Surround the Trees
- log4j配置深度详解
- 给大家推荐几个能赚钱的网站
- 条件编译的一个作用
- 开始学习android开发
- 2013-08-11 Hello word|异常|代码书写规范|编译器虚拟机|注释|命名规则|数据类型|不常用的运算符|语法|