骰子效果图
骰子代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:#292929;
}
.box{
width: 1000px;
height:300px;
background:#666;
margin:50px auto;
display:flex;
justify-content: space-around;
align-items: center;
}
.box>div{
width: 104px;
height: 104px;
background: #e7e7e7;
border-radius:10px;
box-shadow: 0 -5px #bbbbbb inset,0 5px #fff inset ,5px 0 #d7d7d7 inset,-5px 0 #d7d7d7 inset;
display: flex;
box-sizing: border-box;
padding:8px;
}
.box>div span{
width: 25px;
height: 25px;
background: #333333;
border-radius: 50%;
box-shadow: 0 -3px #4f4f4f inset, 0 3px #0a0a0a inset;
}
.box>div:nth-child(1){
justify-content: center;
align-items: center;
}
.box>div:nth-child(2){
justify-content: space-between;
}
.box>div:nth-child(2) span:nth-child(2){
align-self: flex-end;
}
.box>div:nth-child(3){
justify-content: space-between;
}
.box>div:nth-child(3) span:nth-child(2){
justify-content: center;
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){
justify-content: space-between;
flex-direction: column;
}
.box>div:nth-child(4) p,.box>div:nth-child(5) p,.box>div:nth-child(6) p{
display: flex;
justify-content: space-between;
}
.box>div:nth-child(5) p:nth-child(2){
align-self: 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>
