html之圆形用户头像

最新推荐文章于 2024-02-28 09:00:00 发布

小鹏仔0514

最新推荐文章于 2024-02-28 09:00:00 发布

阅读量5.5k

点赞数 6

分类专栏：前端文章标签： HTML 圆形头像

本文链接：https://blog.csdn.net/qq_31063727/article/details/95759976

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现圆形的用户头像代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>头像圆形化处理</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
			#d1{
				width: 100px;
				height: 100px;
				border: 1px solid blue;
				border-radius: 100%;
				overflow: hidden;
			}
			img {
				max-height: 100%;
			}
	</style>
</head>
<body>
	<div id="d1">
		<img src="http://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/48540923dd54564e2d86086eb8de9c82d0584f82.jpg" alt="">
	</div>
</body>
</html>

在<div>标签中套一个<img>标签，并且利用CSS设置外层<div>标签的边框大小和边框样式，在这里通过border-radius:100%将边框设置为圆形，改变设定的数值大小就可以得到不一样的边框。

将边框设置为圆形后，还要对与overflow属性进行设置，将overflow属性设置为hidden，这样当图片超出<div>标签的width和height时就可以将超出的部分隐藏，形成圆形图片的效果，效果图如下：