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

相关推荐
馨谙几秒前
面试题----用户,组,su,su-,sudo,sudo-,nologin shell
java·前端·数据库
王同学 学出来17 分钟前
React案例实操(二)
前端·react.js·前端框架
weixin_4277716127 分钟前
Vite 与 Webpack 模块解析差异
前端·webpack·node.js
永远是我的最爱29 分钟前
基于ASP.NET的图书管理系统的设计与实现
前端·后端·sql·visual studio
广州华水科技37 分钟前
单北斗GNSS技术在变形监测中的应用及其位移监测优势解析
前端
刘晓倩42 分钟前
Python内置函数-hasattr()
前端·javascript·python
C_心欲无痕1 小时前
不点击鼠标也能通过MouseEvent实现点击事件
前端·javascript
鲨莎分不晴1 小时前
【实战】老项目焕发新生:从 Webpack 平滑迁移到 Vite 避坑全记录
前端·webpack·node.js
web小白成长日记2 小时前
从零起步,用TypeScript写一个Todo App:踩坑与收获分享
前端·javascript·typescript
圣心2 小时前
Gemini 模型 介绍
前端