css3画色子 |divcss顶部

.dice{
width:200px;
height:200px;
background-color:#ddd;
border-radius:10px;
position:relative;
}
.dot{
width:50px;
height:50px;
border-radius:50%;
background-color:#222;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
.dot1{
left:25%;
}
.dot2{
left:75%;
}
.dot3{
left:25%;
top:50%;
}
.dot4{
left:75%;
top:50%;
}
.dot5{
left:25%;
bottom:0;
}
.dot6{
left:75%;
bottom:0;
}

首先，大家需要定义一个骰子容器，也就是一个长方形。然后，大家用圆点来表示骰子的点数。在代码中，大家通过定义一个圆点类，来使所以圆点样式的代码简化。接下来，大家要分别定义每一个点的位置，这里采用了绝对定位的方式，每个点的位置都需要手动调整。

通过以上的代码，大家就可以画出一个基本的色子了。如果要让它更加完美，大家还可以为它添加一些动画效果，比如在骰子被点击时，会随机旋转数次，并随机点出一个数字。这里就不再赘述了。