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

相关推荐
excel1 分钟前
AI 冲击下的前端发展指引:从工具到价值的重塑
前端
文心快码BaiduComate1 分钟前
提升组织级AI Coding质量:电商搜索项目实践
前端·后端·程序员
excel12 分钟前
AI 时代前端转型:模型训练才是未来的核心竞争力
前端
放下华子我只抽RuiKe524 分钟前
FastAPI 全栈后端(四):认证与授权
开发语言·前端·javascript·python·深度学习·react.js·fastapi
持敬chijing1 小时前
Web渗透之前后端漏洞-文件包含漏洞
前端·安全·web安全·网络安全·网络攻击模型·安全威胁分析
CV艺术家1 小时前
前端免费高效的接入天气组件(天气网),控制组件的样式
前端
hunterandroid1 小时前
RecyclerView 进阶:DiffUtil 与列表更新
前端
_codeOH1 小时前
Vue 3 vs React 19:框架还在卷,核心原理就这些
前端·vue.js
the_answer1 小时前
CSS 新时代:浏览器原生能力如何重塑前端开发范式
前端
不会写DN1 小时前
固定背景图不随页面滚动的完美方案
前端