用弹性盒实现一个骰子

最新推荐文章于 2022-08-01 12:50:16 发布

流灬

最新推荐文章于 2022-08-01 12:50:16 发布

阅读量281

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_41625074/article/details/104791445

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:1000px;
				height:300px;
				margin:100px auto;
				background: #00FFFF;
				display:flex;
				justify-content:space-around;
				align-items: center;
			}
			.box div{
				width:104px;
				height:104px;
				box-sizing:border-box;
				padding:8px;
				background:#FFFF00;
				border-radius:8px;
				box-shadow:0 5px #000 inset,0 -5px #000 inset,5px 0 #fff inset,-5px 0 #fff inset;
				display:flex;
			}
			span{
				/* display: block; */
				width:24px;
				height:24px;
				background:#DB7093;
				box-shadow:0 2px #000 inset,0 -2px #000 inset;
				border-radius:50%;
			}
			.box div:nth-child(1){
				align-items:flex-start;
				
			}
			.box div:nth-child(2){
				align-items:flex-start;
				justify-content:space-between;
			}
			.box div:nth-child(2) span:nth-child(2){
				align-self:flex-end;
			}
			.box div:nth-child(3){
				align-items:flex-start;
				justify-content:space-between;
			}
			.box div:nth-child(3) span:nth-child(2){
				align-self:center;
			}
			.box div:nth-child(3) span:nth-child(3){
				align-self:flex-end;
			}
			.box div:nth-child(4),.box div:nth-child(5),.box div:nth-child(6){
				flex-direction:column;
				justify-content:space-between;
			}
			.box div:nth-child(4) p,.box div:nth-child(5) p,.box div:nth-child(6) p{
				width: 100%;
				display:flex;
				justify-content:space-between;
			}
			.box div:nth-child(5) p:nth-child(2){
				justify-content:center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>
				<span></span>
			</div>
			<div>
				<span></span>
				<span></span>
			</div>
			<div>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div>
				<p>
					<span></span>
					<span></span>
				</p>
				<p>
					<span></span>
					<span></span>
				</p>
			</div>
			<div>
				<p>
					<span></span>
					<span></span>
				</p>
				<p>
					<span></span>
				</p>
				<p>
					<span></span>
					<span></span>
				</p>
			</div>
			<div>
				<p>
					<span></span>
					<span></span>
				</p>
				<p>
					<span></span>
					<span></span>
				</p>
				<p>
					<span></span>
					<span></span>
				</p>
			</div>
		</div>
	</body>
</html>