骰子一共有6个面,先构建6个div,写上样式:
.box1 {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;//盒子之间的间隙
background-color: paleturquoise;
}
骰子为1的最容易写,居中即可:
<div class="box1">
<div class="contain"></div>
</div>
.contain {
width: 20px;
height: 20px;
margin: 20px;
border-radius: 50%;
background-color: #000000;//小黑点
}
骰子为2的时候,要考虑排列方式,增加flex-direction:column。
.box2 {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-item