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

相关推荐
e***877023 分钟前
windows配置永久路由
android·前端·后端
Dorcas_FE1 小时前
【tips】动态el-form-item中校验的注意点
前端·javascript·vue.js
小小前端要继续努力1 小时前
前端新人怎么更快的融入工作
前端
四岁爱上了她1 小时前
input输入框焦点的获取和隐藏div,一个自定义的下拉选择
前端·javascript·vue.js
fouryears_234172 小时前
现代 Android 后台应用读取剪贴板最佳实践
android·前端·flutter·dart
boolean的主人2 小时前
mac电脑安装nvm
前端
用户1972959188912 小时前
WKWebView的重定向(objective_c)
前端·ios
烟袅2 小时前
5 分钟把 Coze 智能体嵌入网页:原生 JS + Vite 极简方案
前端·javascript·llm
18你磊哥2 小时前
Django WEB 简单项目创建与结构讲解
前端·python·django·sqlite
KangJX2 小时前
iOS 语音房(拍卖房)开发实践
前端·前端框架·客户端