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

.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. Mybatis 配置resultMap一对多关联映射

    resultMap配置: 引用: PO类: 接口: 测试: public class UserMapperTest { private SqlSessionFactory sqlSessionFact ...

  2. 【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作

    什么是跨域 跨域,它是不同的域名(服务器)之间的相互的资源之间的访问. 当协议,域名,端口号任意一个不同,它们就是不同的域. 正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的. 跨域的 ...

  3. 解决ssh ltt3.bg.cn 'jps' bash: jps: command not found 问题

    >>提君博客原创  http://www.cnblogs.com/tijun/  << linux 上我用hadoop用户配置好SSH后,运行 ssh ltt3.bg.cn ' ...

  4. 使用 idea 产生错误The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized

    解决方法 spring.datasource.url=jdbc:mysql://localhost:3306/spring_cache?serverTimezone=GMT%2B8

  5. llegalStateException: getWriter() has already been called for this response

    我使用Springmvc的处理器进行向AJAX传值时出现的问题 当我使用 PrintWriter out = response.getWriter();out.print("用户不存在,请先 ...

  6. Zookeeper的作用,在Hadoop及hbase中具体作用

    什么是Zookeeper,Zookeeper的作用是什么,在Hadoop及hbase中具体作用是什么 一.什么是Zookeeper ZooKeeper 顾名思义 动物园管理员,他是拿来管大象(Hado ...

  7. Sqoop 使用详解(内含对官方文档的解析)

    Sqoop 是 Cloudera 公司创造的一个数据同步工具,现在已经完全开源了. 目前已经是 hadoop 生态环境中数据迁移的首选,另外还有 ali 开发的 DataX 属于同类型工具,由于社区的 ...

  8. JavaScript控制阻止表单提交

    1.在表单上使用onSubmit方法 <?php $form = ActiveForm::begin([ 'options'=>[ 'class' => 'form-horizont ...

  9. SQL Server与SQL Server Express的区别

    SQL Server Express 2005(以下简称 SQLExpress) 是由微软公司开发的 SQL Server 2005(以下简称 SQL2005)的缩减版,这个版本是免费的,它继承了 S ...

  10. Lodop获取全部JS代码,传统JS模版的生成

    Lodop模版有两种方法,一种是传统的JS语句,可以用JS方法里的eval来执行,一种是文档式模版,是特殊格式的base64码,此篇博文介绍传统JS模版的生成方法.两种模版都可以存入一下地方进行调用, ...