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

相关推荐
wuli_滔滔3 分钟前
DevUI云控制台实战:多云管理平台前端架构解密
前端·架构·devui·matechat
深耕AI42 分钟前
【wordpress系列教程】02 Blocksy主题
运维·服务器·前端
我笔记2 小时前
vue 子父调用
前端·javascript·vue.js
毕设源码-朱学姐2 小时前
【开题答辩全过程】以 基于vue.js的校园二手平台为例,包含答辩的问题和答案
前端·javascript·vue.js
m0_471199633 小时前
【JavaScript】Set 和 Map 核心区别与实战用法(ES6 集合全解析)
前端·javascript·es6
hoiii1873 小时前
MATLAB中主成分分析(PCA)与相关性分析的实现
前端·人工智能·matlab
大波V53 小时前
用 nvm 彻底重装 Node 12.22.12(确保干净)
前端
和和和4 小时前
React Scheduler为何采用MessageChannel调度?
前端·javascript
Ric9704 小时前
Mac上Git不识别文件名大小写修改?一招搞定!
前端
和和和4 小时前
前端应该知道的浏览器知识
前端·javascript