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

相关推荐
张拭心3 分钟前
"氛围编程"程序员被解雇了
android·前端·人工智能
SomUrim5 分钟前
ruoyi-vue-plus中await axios报错undefined的问题(请求正常)
前端·ruoyi
daizikui5 分钟前
streamlit实现登录功能
服务器·前端·javascript
广州华水科技7 分钟前
如何通过单北斗形变监测一体机提高大坝安全监测效率?
前端
over69732 分钟前
用 React Context 实现全局主题切换:从零搭建暗黑/亮色模式系统
前端·react.js·面试
ycgg34 分钟前
深入理解 AbortSignal:前端异步操作取消的原生方案
前端
妮妮喔妮36 分钟前
前端字节面试大纲
前端·面试·职场和发展
白兰地空瓶38 分钟前
告别“千里传荔枝”:React useContext 打造跨层级通信“任意门”
前端·react.js
恋猫de小郭1 小时前
Flutter 小技巧之帮网友理解 SliverConstraints overlap
android·前端·flutter
小oo呆1 小时前
【自然语言处理与大模型】LangChainV1.0入门指南:核心组件Structured Output
前端·javascript·easyui