css 圆形头像
方法一:背景图片(推荐) 好处是,图片长宽不等的情况下图片不会变形
.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 圆形头像的更多相关文章
- CSS之样式属性(背景固定、圆形头像、模态框)
CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...
- css3圆形头像(当图片宽高不相等时)
1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...
- WordPress制作圆形头像友情链接页面的方法
网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门 就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...
- html圆形头像的制作
<html> <head><title>圆形头像的制作</title> <style type="text/css">. ...
- 通过CSS3实现圆形头像显示
很久没更新博客了,因为比较菜,也没什么能在上面分享的.作为新手,马上要毕业找工作了,最近又在重新学习web的一些知识,刚刚学到CSS3,跟大家分享一些比较有趣的知识.今天分享的是利用CSS实现圆形头像 ...
- Android 圆形头像 自己动手
圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...
- Android之圆形头像裁切
PS:今天项目测试组发现,百度地图定位的数据坐标位置是正确的,但是显示的数据是错误的.最后查来查去发现,那个商厦在百度地图上根本就没有那条数据,这让我如何显示,当初就推崇使用高德地图定位,上面的数据量 ...
- Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像
此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...
- NGUI 圆形头像遮罩
NGUI 圆形头像遮罩 列表,求助 http://tieba.baidu.com/p/3961444508
随机推荐
- Docker以及K8S学习总结----From各位大神...
Docker的安装使用. 1. 修改yum源到境内站点: wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/re ...
- C++多态(静多态和动多态)
如今的C++已经是个多重泛型编程语言(multiparadigm programming lauguage),一个同时支持过程形式(procedural).面向对象形式(object-oriented ...
- javap -v没有显示LocalVaribleTable
时隔多日,终于找到为什么javap -v .class文件没有LocalVariableTable出现 因为默认的javac编译没有生成相关的调试信息,这里我们可以通过javac -help查看指令帮 ...
- Spring 的java 配置方式
Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1.1@Configuration 和 @Bean Spring的Java配置方式是通过 @Configuration 和 @ ...
- Mapper动态代理方式
开发规范 Mapper接口开发方法只需要程序员编写Mapper接口(相当于Dao接口),由Mybatis框架根据接口定义创建接口的动态代理对象,代理对象的方法体同Dao接口实现类方法. Mapper接 ...
- 今天开始学Pattern Recognition and Machine Learning (PRML),章节5.2-5.3,Neural Networks神经网络训练(BP算法)
转载请注明出处:http://www.cnblogs.com/xbinworld/p/4265530.html 这一篇是整个第五章的精华了,会重点介绍一下Neural Networks的训练方法——反 ...
- js定时函数,定时改变字体的大小
<html> <head> </head> <body> <div id="d"> js控制字体大小 </div& ...
- table2excel使用
原table2excel代码 /* * 采用jquery模板插件——jQuery Boilerplate * * Made by QuJun * 2017/01/10 */ //table2excel ...
- 了解C#中的HashSet与示例
在C#中引入HashSet 在.NET框架中,有几个类可用于执行这些操作.一些课程如下: 列表 字典 哈希集 队列 集合 在C#编程中,像ArrayList,List这样的集合,只需添加其中的值,而不 ...
- 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 ...