提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

css案例9——圆角头像

案例CSS 圆角 头像
2023-09-14 09:13:44 时间

一、简介

关于圆角头像，一般来说都是有一个圆形盒子，不管里面插入的是什么图，显示出来都是圆形的。 这时候把外面的盒子设置好，给里面的图片设置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>

四、总结

圆角的用法：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

相关文章