在网页设计中，号码牌是一种非常常见的元素。在CSS中，我们可以轻松地实现设计一个漂亮的号码牌。下面让我们一起来看看如何使用CSS设计自己的号码牌吧。

.number {
display: inline-block;  /* 将号码牌变成块状元素并且水平居中 */
padding: 4px 8px;       /* 设置内边距 */
background-color: #007bff; /* 设置背景颜色 */
color: #ffffff;        /* 设置字体颜色 */
font-size: 16px;       /* 设置字体大小 */
font-weight: bold;     /* 设置字体粗细 */
border-radius: 4px;    /* 设置圆角 */
box-shadow: 0 3px 6px rgba(0, 123, 255, 0.16); /* 设置阴影 */
}

我们给出的这个号码牌的样式不是固定的，你可以根据自己的需求随意修改样式。例如，你可以改变字体、颜色、阴影等等。

最后，我们只需要在HTML中使用这个类名就可以了：

<span class="number">1</span>

当然，使用CSS设计号码牌的方法也有很多种，我们只是给出了一种简单又好用的方法。希望这篇文章对你有帮助。