一、案例说明

1.关于圆角头像，一般来说都是有一个圆形盒子，不管里面插入的是什么图，显示出来都是圆形的。这时候把外面的盒子设置好，给里面的图片设置width：100%；height：100%；重要的是别忘记给外面的盒子加overflow:hidden;
2.细节：没有的头像的时候有个框显示着，表示此处有东西。

二、案例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.touxiang{ width:50px; height:50px; border-radius:50%; overflow:hidden;border: 3px solid #ccc;}.touxiang img{ width:100%; height:100%;object-fit: cover;}</style></head><body><div class="touxiang"><img src="img/1111.png" /></div></body>
</html>

css案例17——圆角头像相关推荐

纯CSS实现兼容ie6以上的圆角头像
先贴下各种浏览器下的效果图: 1.IE6 2.IE7 3.Chrome <!DOCTYPE html> <html xmlns="http://www.w3.org/199 ...
纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS自适应宽度圆角按钮
CSS自适应宽度圆角按钮,背景图要使用满足最长按钮的宽度,然后通过两个标签a, span,一个通过背景图的左对齐,一个通过背景图的右对齐. <!DOCTYPE html PUBLIC " ...
纯CSS实现漂亮圆角阴影边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
CSS实现的带头像的彩色垂直菜单源码
大家好,今天给大家介绍一款,用CSS实现的带头像的彩色垂直菜单源码(图1).送给大家哦,获取方式在本文末尾. 图1 鼠标悬停在相应区域,就会出现头像图2 带切换动画(图3) 图4 部分代码: * { ...
python-web开发[12]之css案例、bootstrap探索
day12 CSS 今日概要: 案例应用(利用之前所学知识) CSS知识点模板 + CSS + 构建页面 1.CSS案例 1.1 内容回顾 HTML标签固定格式,记住标签长什么样子,例如: h/d ...
unity上传头像_Unity用户自定义圆角头像
前天朋友遇到一个这样的需求,而且比较棘手让我帮忙解决.需求就是棋牌类的游戏,玩家的个人资料中包括自己的头像而且可以浏览相册中的图片或者使用相机拍照设置.关于这个问题我也查阅一些资料,由于涉及安卓部分知 ...

css案例17——圆角头像

一、案例说明

二、案例代码

css案例17——圆角头像相关推荐

最新文章

热门文章