CSS3是前端開發中非常重要的一部分，它提供了豐富的樣式屬性，可以實現許多炫酷的效果。下面我們來介紹如何用CSS3來制作一個簡單的骰子。

.dice{
position: relative;
width: 80px;
height: 80px;
background-color: #fff;
border: 1px solid #ccc;
text-align: center;
font-size: 20px;
line-height: 80px;
cursor: pointer;
 }
.dice:before{
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 60px;
height: 60px;
 }
.dice1:before{
background:url("dice-1.png") no-repeat center center;
 }
.dice2:before{
background:url("dice-2.png") no-repeat center center;
 }
.dice3:before{
background:url("dice-3.png") no-repeat center center;
 }
.dice4:before{
background:url("dice-4.png") no-repeat center center;
 }
.dice5:before{
background:url("dice-5.png") no-repeat center center;
 }
.dice6:before{
background:url("dice-6.png") no-repeat center center;
 }

首先我們需要一個骰子標簽，設置寬度、高度、背景顏色、邊框等基本樣式。然后添加一個偽元素:before，來制作骰子上面的點數。使用background屬性設置圖片作為點數背景。

最后，我們為每個不同的圖案的點數制作一個類名，使用:hover來添加鼠標懸停狀態樣式，提高用戶體驗。這樣，我們就實現了一個簡單的骰子。