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
随机推荐
- jQuery EasyUI布局容器layout实例精讲
这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...
- 校园电商项目2(基于SSM)——模块设计
步骤一:各模块职责 步骤二:实体类设计 package com.figsprite.o2o.bean; import java.util.Date; public class Area { priva ...
- Vue 中提示报错 handlers[i].call is not a function解决方法
Vue 中提示警告 TypeError: handlers[i].call is not a function at callHook (vue.esm.js?a026:2921) at Object ...
- Python:matplotlib绘制直方图
使用hist方法来绘制直方图: 绘制直方图,最主要的是一个数据集data和需要划分的区间数量bins,另外你也可以设置一些颜色.类型参数: plt.hist(np.random.randn(1 ...
- python数据结构与算法第十一天【希尔排序】
1.希尔排序的原理 2.代码实现 def shell_sort(alist): n = len(alist) # 初始步长 gap = n / 2 while gap > 0: # 按步长进行插 ...
- Spring Boot 构建电商基础秒杀项目 (十一) 秒杀
SpringBoot构建电商基础秒杀项目 学习笔记 新建表 create table if not exists promo ( id int not null auto_increment, pro ...
- 前端bug记录
记录一下前端入门时期遇到的一些bug. 1.同步.异步问题 背景:Javascript语言的执行环境是单线程.即一次只能完成一个任务.若有多个任务则需排队逐个执行——前一个任务完成,再执行后一个任务. ...
- Qt5 入门
main()函数中第一句是创建一个QApplication类的实例. 对于 Qt 程序来说,main()函数一般以创建 application 对象(GUI 程序是QApplication,非 GUI ...
- javadoc格式化,解决多个形参空格暴多,页面溢出问题
格式化前: 格式化后: pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xml ...
- 在 Activity 中实现 getContentView 操作
2017/9/8 17:17:03 前言 最近接到个需要优化Android原生系统设置APK的任务.这个任务里面有一个更换应用背景图片的需求.我手里的这个设备是一个平板设备,使用了一下这个 ...