css案例9——圆角头像

最新推荐文章于 2024-07-24 11:39:30 发布

耶啵奶膘

最新推荐文章于 2024-07-24 11:39:30 发布

阅读量489

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/xulihua_75/article/details/125234500

版权

css html

CSS 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

一、简介

关于圆角头像，一般来说都是有一个圆形盒子，不管里面插入的是什么图，显示出来都是圆形的。这时候把外面的盒子设置好，给里面的图片设置width：100%；height：100%，填满盒子。

二、案例效果

在这里插入图片描述

三、案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="shortcut icon" href="./favicon.ico" />
		<style>
			.touxiang{ width:50px; height:50px; border-radius:50%; overflow:hidden;}
			.touxiang img{ width:100%; height:100%;object-fit: cover}
		</style>
	</head>
	<body>
		<div class="touxiang">
			<img src="./img/bx1.jpeg" />
		</div>
	</body>
</html>