数字小圆角

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.containers{
				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;
			}
			.container1{background-color: red;}
			.container2{background-color: orange;}
			.container3{background-color: yellow;}
			.container4{background-color: green;}
			.container5{background-color: blue;}
			.container6{background-color: blueviolet;}
		</style>
	</head>
	<body>
		<div class="containers">
			<div class="container1"><div class="num">1</div></div>
			<div class="container2"><div class="num">2</div></div>
			<div class="container3"><div class="num">3</div></div>
			<div class="container4"><div class="num">4</div></div>
			<div class="container5"><div class="num">5</div></div>
			<div class="container6"><div class="num">6</div></div>
		</div>
	</body>
</html>
posted @ 2026-06-25 08:58  Yyy1128  阅读(4)  评论(1)    收藏  举报