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

相关推荐
你脸上有BUG8 分钟前
【工程化】前端打包时间优化
前端
TeleostNaCl9 分钟前
Google Chrome 浏览器历史记录的存储位置
前端·chrome·经验分享
大模型教程15 分钟前
前端可以转型AI工程师吗?那可太能了...
前端·llm·agent
转转技术团队20 分钟前
前端开发应该了解的浏览器背后的黑科技
前端
2503_9284115622 分钟前
12.15 element-plus的一些组件(上)
前端·vue.js
JS_GGbond33 分钟前
JavaScript原型链:一份会“遗传”的家族传家宝
前端·javascript
前端达人34 分钟前
CSS终于不再是痛点:2026年这7个特性让你删掉一半JavaScript
开发语言·前端·javascript·css·ecmascript
JS_GGbond38 分钟前
当JS拷贝玩起了“俄罗斯套娃”:深拷贝与浅拷贝的趣味对决
前端·javascript
code_YuJun41 分钟前
脚手架开发工具——npmlog
前端
donecoding41 分钟前
掌握 :focus-within,让你的AI对话输入体验更上一层楼!
前端·人工智能