html圆形头像简易实现

效果如下

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>原型头像样式实现</title>
</head>
<body><div class="main"><div class="myImageDiv"><div class="imageDivFather"><div class="imageDivContainer"></div></div></div></div>
</body>
<style type="text/css">* {padding: 0px;margin: 0px;}html,body{width: 100%;height: 100%;margin: 0px;padding: 0px;}.main {width: 100%;height: 100%;/* background-color: darkgrey; */}.myImageDiv {width: 100%;height: 20%;/* background-color: darkseagreen; */display: flex;justify-content: center;align-items: center;}.imageDivFather {width: 120px;height: 120px;border-radius: 60px;background-color: yellow;}.imageDivContainer {margin: 10px 0 0 10px;width: 100px;height: 100px;background-color: #fff;border-radius: 50px;background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602486631477&di=7b59ba2d1b6bde0ce91bdc7d481bedc9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201409%2F11%2F20140911211243_3rT4u.jpeg');background-repeat:no-repeat;background-size: 100% 100%;}
</style>
</html>

html圆形头像简易实现相关推荐

html img 圆头像_html圆形头像简易实现
html圆形头像简易实现 html圆形头像简易实现 html圆形头像简易实现效果如下代码如下原型头像样式实现 * { padding: 0px; margin: 0px; } html,body ...
自定义UI 圆形头像
系列文章目录自定义UI 基础知识自定义UI 绘制饼图自定义UI 圆形头像自定义UI 自制表盘自定义UI 简易图文混排自定义UI 使用Camera做三维变换自定义UI 属性动画自定义UI ...
WordPress制作圆形头像友情链接页面的方法
网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...
ios 裁剪圆形头像_iOS开发笔记：实现圆形头像
初学iOS,记录一下自己遇到的一些问题,也希望能够对别人有所帮助一般应用的个人头像如上图,圆形头像算是每款App中最常见的东西了,刚好最近有遇到这个问题,并且顺利解决了,其实很简单,调用layer这 ...
android开发之 - 圆形头像
//最新第三方圆形头像: https://github.com/hdodenhof/CircleImageView https://github.com/MostafaGazar/CustomShap ...
iOS开发之裁剪圆形头像
2019独角兽企业重金招聘Python工程师标准>>> - (void)viewDidLoad {[super viewDidLoad];//加载图片UIImage *image = ...
android生成圆形头像
/*各种各样的图如何如何生成圆形头像,请下面看下面,可以先用bitmp直接用 Bitmap.createScaledBitmap(),如果是存到数据库里面的话,先把转它转成string,然后放取出来, ...
Duilib实现圆形头像控件
.h文件 1 #ifndef __UIHEADICON_H__ 2 #define __UIHEADICON_H__ 3 4 5 /* 6 名称:圆形头像控件(派生CButtonUI类) 7 */ 8 ...
android 清空canvas部分内容_Android自定义View实现圆形头像效果
在我们的APP中通常会遇到,展示圆形头像的需求,一般通过Glide就能实现,但是让我们做一个圆形头像,如果让我们自定义实现这种效果,该怎样做呢? 好,接下来本文通过三种方式来实现这种效果! 注意:这是 ...
android 头像球_Android一行代码实现圆形头像
效果图在开发APP中,经常要实现圆形头像,那么该如何实现呢? 要裁剪吗,要重写draw函数吗?不用,只用一行代码就可以实现 Glide实现圆形图像 Glide.with(mContext) .loa ...

html圆形头像简易实现

html圆形头像简易实现

html圆形头像简易实现相关推荐

最新文章

热门文章