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

相关推荐
悟能不能悟几秒前
Postman Pre-request Script 详细讲解与高级技巧
java·开发语言·前端
henujolly3 分钟前
useeffect和uselayouteffect
前端·javascript·react.js
未来之窗软件服务5 分钟前
幽冥大陆(九十九)文件大小换算+软考—东方仙盟练气期
css·html·css3·计算机软考·仙盟创梦ide·东方仙盟
Ulyanov6 分钟前
Python射击游戏开发实战:从系统架构到高级编程技巧
开发语言·前端·python·系统架构·tkinter·gui开发
华仔啊10 分钟前
这 10 个 Vue3 性能优化技巧很实用,但很多项目都没用上
前端·vue.js
手握风云-13 分钟前
JavaEE 进阶第九期:Spring MVC - Web开发的“交通枢纽”(三)
前端·spring·java-ee
天问一20 分钟前
Cesium 处理屏幕空间事件(鼠标点击、移动、滚轮)的示例
前端·javascript
@PHARAOH21 分钟前
WHAT - Vercel react-best-practices 系列(五)
前端·react.js·前端框架
bjzhang7522 分钟前
使用 HTML + JavaScript 实现多会议室甘特视图管理系统
前端·javascript·html
qiqiliuwu22 分钟前
VUE3+TS+ElementUI项目中监测页面滚动scroll事件以及滚动高度不生效问题的解决方案(window.addEventListener)
前端·javascript·elementui·typescript·vue