我想写一个展示出麻将九筒的html网页，但是不知道怎么回事一直显示不出点数，只有box
希望能得到指正
我的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>九筒</title>
<style>
.box{
display:flex;
flex-wrap:wrap;
align-content:space-between;
}
.column{
flex-basis:100%;
display:flex;
justify-content:space-between;
}
.element1{
display:block;
width:36px;
height:36px;
background-color:white;
border-radius:50%;
box-shadow:inset 0 3px #111, inset 0 -3px #555;
margin:4px;
}
.element2{
display:block;
width:36px;
height:36px;
background-color:white;
border-radius:50%;
box-shadow:inset 0 3px #ff0000,inset 0 -3px #fa8072;
margin:4px;
}
.element3{
display:block;
width:36px;
height:36px;
background-color:white;
border-radius:50%;
box-shadow:inset 0 3px #2E8B57,inset 0 -3px #228B22;
margin:4px;
}
[class$="box"]{
margin:16px;
padding:4px;
background-color:#e7e7e7;
width:104px;
height:104px;
object-fit:contain;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
border-radius:10%;
}
</style>
</head>
<body>
<div class="box">
<div class="column">
<span class="element1"> </span>
<span class="element2"></span>
<span class="element3"></span>
</div>
<div class="column">
<span class="element1"></span>
<span class="element2"></span>
<span class="element3"></span>
</div>
<div class="column">
<span class="element1"></span>
<span class="element2"></span>
<span class="element3"></span>
</div>
</div>
</body>
</html>
