CSS如何将图片变为圆形?

我们可以通过 border-radius 属性实现图片圆角。

我们上传图片后,将它属性值设置为图片尺寸的一半,即可将正方形图片设置为圆形。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>title</title>
	<style>
		#first{
			height: 100px;
			width: 100px;
			background-color: pink;
			float: left;
				}
		#second{
			height: 100px;
			width: 100px;
			background-color: red;
			float: left;
			margin-left: 10px;
			border-radius: 50%;
			}

	</style>
</head>
<body>
		<div id="first"></div>
		<div id="second"></div>
</body>
</html>

如果不清楚图片的尺寸大小,直接将 border-radius 的值设为 50% 即可。

相关推荐
C澒17 分钟前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..20 分钟前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
hhy_smile26 分钟前
Class in Python
java·前端·python
小邓吖1 小时前
自己做了一个工具网站
前端·分布式·后端·中间件·架构·golang
南风知我意9571 小时前
【前端面试2】基础面试(杂项)
前端·面试·职场和发展
LJianK11 小时前
BUG: Uncaught Error: [DecimalError] Invalid argument: .0
前端
No Silver Bullet2 小时前
Nginx 内存不足对Web 应用的影响分析
运维·前端·nginx
一起养小猫2 小时前
Flutter for OpenHarmony 实战 表单处理与验证完整指南
android·开发语言·前端·javascript·flutter·harmonyos
weixin_395448912 小时前
main.c_cursor_0130
前端·网络·算法
C澒2 小时前
SGW 接入层运维实战:配置查看 + 监控分析 + 日志排查
前端·安全·运维开发