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
随机推荐
- [转帖]wifi 4G 和 蓝牙的区别
作者:沈万马链接:https://www.zhihu.com/question/64739486/answer/225227838来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- [转帖]NotePad++编辑Linux中的文件
NotePad++编辑Linux中的文件 https://blog.csdn.net/chengqiuming/article/details/78882692 原作者 未经允许不允许转帖 加密自己参 ...
- Java 线程的生命周期
当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态,在线程的生命周期中,它要经过新建(New).就绪(Runnable).运行(Running).阻塞(Blocked)和死 ...
- cookie,localStorage和sessionStorage区别
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...
- Yii2上传图片插件使用
例子: 1.在表单中: <?php $form = \yii\widgets\ActiveForm::begin([ 'options'=>[ 'class' => 'form-ho ...
- layui弹窗 之 iframe关闭
1)关闭特定iframe //当在iframe页面关闭自身时,在iframe页执行以下js脚本 var index = parent.layer.getFrameIndex(window.name); ...
- css伪元素之before和after
css里面的伪元素主要是用来给选择器设置特殊效果.根据常用性,记录before和after. “:before”伪元素用来在元素的内容前面添加新的元素.比如标题前面会有一个小方块,就可以通过‘ :be ...
- centOS7 下配置和启动maria数据库
从最新版本的linux系统开始,默认的是 Mariadb而不是mysql! 使用系统自带的repos安装很简单: yum install mariadb mariadb-server systemct ...
- Express学习(2) ------ 中间件
TJ Holowaychuck 将 “中间件”描述为易于挂载和调用的模块,可以“无序”使用,并有利于应用的快速开发. 1, 中间件是一个模块.在js中,模块意味着函数,所以中间件是一个函数.那么这个函 ...
- WC2019游记 && 课件
WC2019 游记 课件 wc2019.zip_免费高速下载|百度网盘-分享无限制 提取码: un6z day 0 打飞机去广州... 在飞机上刷了爱乐(le)之城, 相当好看... 广二好大! 哈三 ...