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

相关推荐
白帽子凯哥哥1 分钟前
网络安全Web基础完全指南:从小白到入门安全测试
前端·sql·web安全·信息安全·渗透测试·漏洞
RFCEO7 分钟前
前端编程 课程十四、:CSS核心基础2:选择器优先级 + 伪类选择器(解决冲突+交互效果)
前端·css·交互·css选择器优先级判断规则详解·css important使用·css链接伪类lvha顺序·实现悬浮交互效果
web打印社区9 分钟前
前端实现浏览器预览打印:从原生方案到专业工具
前端·javascript·vue.js·electron
徐同保23 分钟前
vue.config.ts配置代理解决跨域,配置开发环境开启source-map
前端·javascript·vue.js
Hexene...40 分钟前
【前端Vue】npm install时根据新的状态重新引入实际用到的包,不引入未使用到的
前端·vue.js·npm
2301_780669861 小时前
Vue(入门配置、常用指令)、Ajax、Axios
前端·vue.js·ajax·javaweb
码农幻想梦1 小时前
Vue3入门到实战【尚硅谷】
前端·vue
hudou_k1 小时前
利用WebNaket实现Web应用直接访问硬件设备
前端
吃茄子的猫1 小时前
若依框架根据当前登录人信息,显示不同的静态公司logo
前端·vue
LZQ <=小氣鬼=>1 小时前
React + Ant Design (antd) 国际化完整实战教程
前端·react.js·前端框架·antd·moment