方法一:背景图片(推荐) 好处是,图片长宽不等的情况下图片不会变形

.ui-photo {
width: 100px;
height: 100px;
background: url("img/test.jpg") no-repeat;
background-position: center;
background-size: 100px;
border-radius: 50%;
}
<div class="ui-photo"></div>

效果:

方法二:img标签

.ui-photo1 img{
width: 100px;
height: 100px;
border-radius: 50%;
}
<div class="ui-photo1">
<img src="img/test.jpg"/>
</div>

效果:

css 圆形头像的更多相关文章

  1. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

  2. css3圆形头像(当图片宽高不相等时)

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  3. WordPress制作圆形头像友情链接页面的方法

    网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门 就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...

  4. html圆形头像的制作

    <html> <head><title>圆形头像的制作</title> <style type="text/css">. ...

  5. 通过CSS3实现圆形头像显示

    很久没更新博客了,因为比较菜,也没什么能在上面分享的.作为新手,马上要毕业找工作了,最近又在重新学习web的一些知识,刚刚学到CSS3,跟大家分享一些比较有趣的知识.今天分享的是利用CSS实现圆形头像 ...

  6. Android 圆形头像 自己动手

    圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...

  7. Android之圆形头像裁切

    PS:今天项目测试组发现,百度地图定位的数据坐标位置是正确的,但是显示的数据是错误的.最后查来查去发现,那个商厦在百度地图上根本就没有那条数据,这让我如何显示,当初就推崇使用高德地图定位,上面的数据量 ...

  8. Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

  9. NGUI 圆形头像遮罩

    NGUI 圆形头像遮罩 列表,求助 http://tieba.baidu.com/p/3961444508

随机推荐

  1. Docker以及K8S学习总结----From各位大神...

    Docker的安装使用. 1.  修改yum源到境内站点: wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/re ...

  2. C++多态(静多态和动多态)

    如今的C++已经是个多重泛型编程语言(multiparadigm programming lauguage),一个同时支持过程形式(procedural).面向对象形式(object-oriented ...

  3. javap -v没有显示LocalVaribleTable

    时隔多日,终于找到为什么javap -v .class文件没有LocalVariableTable出现 因为默认的javac编译没有生成相关的调试信息,这里我们可以通过javac -help查看指令帮 ...

  4. Spring 的java 配置方式

    Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1.1@Configuration 和 @Bean Spring的Java配置方式是通过 @Configuration 和 @ ...

  5. Mapper动态代理方式

    开发规范 Mapper接口开发方法只需要程序员编写Mapper接口(相当于Dao接口),由Mybatis框架根据接口定义创建接口的动态代理对象,代理对象的方法体同Dao接口实现类方法. Mapper接 ...

  6. 今天开始学Pattern Recognition and Machine Learning (PRML),章节5.2-5.3,Neural Networks神经网络训练(BP算法)

    转载请注明出处:http://www.cnblogs.com/xbinworld/p/4265530.html 这一篇是整个第五章的精华了,会重点介绍一下Neural Networks的训练方法——反 ...

  7. js定时函数,定时改变字体的大小

    <html> <head> </head> <body> <div id="d"> js控制字体大小 </div& ...

  8. table2excel使用

    原table2excel代码 /* * 采用jquery模板插件——jQuery Boilerplate * * Made by QuJun * 2017/01/10 */ //table2excel ...

  9. 了解C#中的HashSet与示例

    在C#中引入HashSet 在.NET框架中,有几个类可用于执行这些操作.一些课程如下: 列表 字典 哈希集 队列 集合 在C#编程中,像ArrayList,List这样的集合,只需添加其中的值,而不 ...

  10. Error: File 'C:\somepath\bin\ARM\Release\App_1.1.218.0_scale-100.appx' not found.

    Hi Everyone, We are working on a fix for this issue as quickly as we can, but we have identified a w ...