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% 即可。

相关推荐
IT_陈寒6 小时前
Vue的动态组件坑了我整整一天!
前端·人工智能·后端
恋猫de小郭6 小时前
Flutter 最好的 AI 自动化测试工具:Patrol
android·前端·flutter
Cobyte6 小时前
AI 的个人便签纸:Claude Code 的 TodoWrite 模式
前端·后端·aigc
风兮雨露6 小时前
Java 从入门到精通,前端资料
java·开发语言·前端
ZC跨境爬虫6 小时前
跟着 MDN 学CSS day_43:CSS布局挑战——从浮动到弹性盒与栅格的综合实践
前端·css·ui·html·tensorflow
Qres8216 小时前
Hexo博客本地配置
前端·博客·hexo
Bigger6 小时前
GitLab-Runner + AI 代码审查服务 + 远程大模型 全套部署运维实战
前端·ci/cd·ai编程
_xaboy7 小时前
开源AI表单设计器 FcDesigner v3.5 版本发布!
前端·vue.js·低代码·开源·表单
爱讲故事的7 小时前
操作系统第三讲:Context Switch —— 用户态如何安全地进入内核态?
前端·javascript·安全
light blue bird7 小时前
支轴事件任务线程执行工序路径的图表组件
前端·jvm·windows