使用border-radius制作圆

使用border-radius制作圆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container{
				height: 48px;
				display: flex;
			}
			div[class^=item]{
				flex: 1;
			}
			.num{
				width: 24px;
				height: 24px;
				color: #000;
				background-color:#fff;
				border-radius:50%;
				text-align:center;
				margin:12px auto;
			}
			.item1{background-color:#E7000A;}
			.item2{background-color:#F29900;}
			.item3{background-color:#FDF100;}
			.item4{background-color:#029A43;}
			.item5{background-color:#0268BC;}
			.item6{background-color:#601289;}

		</style>
	</head>
	<body>
		<div class="container">
		<div class="item1"><div class="num">1</div></div>
		<div class="item2"><div class="num">2</div></div>
		<div class="item3"><div class="num">3</div></div>
		<div class="item4"><div class="num">4</div></div>
		<div class="item5"><div class="num">5</div></div>
		<div class="item6"><div class="num">6</div></div>
		</div>
	</body>
</html>
posted @ 2026-06-26 09:29  今今日晴  阅读(19)  评论(0)    收藏  举报