HTML使用div设计基本形状的方法（四川省职高信息技术一类）-CSDN博客

本文链接：https://blog.csdn.net/2403_88399315/article/details/147722016

<!DOCTYPE html>
<html>
	<head lang="zh-CN">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>网页标题</title>
		<link rel="stylesheet" type="text/css" href="CSS.css">
	</head>
	<body class="center">
		<div class="div-1">圆形</div>
		<div class="div-2">正方形</div>
		<div class="div-3">长方形</div>
		<div class="div-4">圆角方形</div>
		<!-- 作者：栀子花.451 -->
		<!-- 时间：2025-5-5 -->
	</body>
</html>

.center{
	display: flex;  /* 设置为弹性布局 */
	justify-content: center;  /* 主轴方向居中 */
	align-items: center;  /* 交叉轴方向居中 */
}
.div-1 {
	width: 100px;  /* 设置宽高 */
	height: 100px;  /* 设置宽高 */
	background-color: #6495ED;  /* 设置背景颜色 */
	border-radius: 50%;  /* 设置圆角 */
	text-align: center;  /* 水平居中 */
	line-height: 100px;  /* 垂直居中 */
	margin-left: 10px;  /* 设置左外边距 */
	margin-right: 10px;  /* 设置右外边距 */
}
.div-2{
	width: 100px;  /* 设置宽高 */
	height: 100px;  /* 设置宽高 */
	background-color: #FF6347;  /* 设置背景颜色 */
	border-radius: 0%;  /* 设置圆角 */
	text-align: center;  /* 水平居中 */
	line-height: 100px;  /* 垂直居中 */
	margin-left: 10px;  /* 设置左外边距 */
	margin-right: 10px;  /* 设置右外边距 */
}
.div-3{
	width: 150px;  /* 设置宽高 */
	height: 100px;  /* 设置宽高 */
	background-color: #3CB371;  /* 设置背景颜色 */
	border-radius: 0%;  /* 设置圆角 */
	text-align: center;  /* 水平居中 */
	line-height: 100px;  /* 垂直居中 */
	margin-left: 10px;  /* 设置左外边距 */
	margin-right: 10px;  /* 设置右外边距 */
}
.div-4{
	width: 100px;  /* 设置宽高 */
	height: 100px;  /* 设置宽高 */
	background-color: #FFD700;  /* 设置背景颜色 */
	border-radius: 25%;  /* 设置圆角 */
	text-align: center;  /* 水平居中 */
	line-height: 100px;  /* 垂直居中 */
	margin-left: 10px;  /* 设置左外边距 */
	margin-right: 10px;  /* 设置右外边距 */
}

一：圆形

.div-1 {
	width: 100px;  /* 设置宽高 */
	height: 100px;  /* 设置宽高 */
	background-color: #6495ED;  /* 设置背景颜色 */
	border-radius: 50%;  /* 设置圆角 */
	text-align: center;  /* 水平居中 */
	line-height: 100px;  /* 垂直居中 */
	margin-left: 10px;  /* 设置左外边距 */
	margin-right: 10px;  /* 设置右外边距 */
}

二：正方形

.div-2{
	width: 100px;  /* 设置宽高 */
	height: 100px;  /* 设置宽高 */
	background-color: #FF6347;  /* 设置背景颜色 */
	border-radius: 0%;  /* 设置圆角 */
	text-align: center;  /* 水平居中 */
	line-height: 100px;  /* 垂直居中 */
	margin-left: 10px;  /* 设置左外边距 */
	margin-right: 10px;  /* 设置右外边距 */
}

三：长方形

.div-3{
	width: 150px;  /* 设置宽高 */
	height: 100px;  /* 设置宽高 */
	background-color: #3CB371;  /* 设置背景颜色 */
	border-radius: 0%;  /* 设置圆角 */
	text-align: center;  /* 水平居中 */
	line-height: 100px;  /* 垂直居中 */
	margin-left: 10px;  /* 设置左外边距 */
	margin-right: 10px;  /* 设置右外边距 */
}

四：圆角方形

.div-4{
	width: 100px;  /* 设置宽高 */
	height: 100px;  /* 设置宽高 */
	background-color: #FFD700;  /* 设置背景颜色 */
	border-radius: 25%;  /* 设置圆角 */
	text-align: center;  /* 水平居中 */
	line-height: 100px;  /* 垂直居中 */
	margin-left: 10px;  /* 设置左外边距 */
	margin-right: 10px;  /* 设置右外边距 */
}

五：页面Body总体布局

.center{
	display: flex;  /* 设置为弹性布局 */
	justify-content: center;  /* 主轴方向居中 */
	align-items: center;  /* 交叉轴方向居中 */
}