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

相关推荐
ヤ鬧鬧o.1 天前
多彩背景切换演示
前端·css·html·html5
lethelyh1 天前
Vue day1
前端·javascript·vue.js
酉鬼女又兒1 天前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海1 天前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大1 天前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
一起养小猫1 天前
Flutter for OpenHarmony 实战:按钮类 Widget 完全指南
前端·javascript·flutter
css趣多多1 天前
Vux store实例的模块化管理
前端
我是伪码农1 天前
Vue 1.26
前端·javascript·vue.js
晚霞的不甘1 天前
Flutter for OpenHarmony 创意实战:打造一款炫酷的“太空舱”倒计时应用
开发语言·前端·flutter·正则表达式·前端框架·postman
这儿有一堆花1 天前
CSS 拟真光影设计:从扁平到深度的技术复盘
前端·css