CSS 实现倒角中的数字

倒角（也称为标签或徽章）通常用于显示数字、信息或状态。以下是一些使用CSS实现倒角的基础示例。

单个数字倒角

HTML结构：

<div class="badge-container">
  <div class="badge">1</div>
</div>

CSS样式：

.badge-container {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #ccc;
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background-color: red;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}

在元素角落中显示数字倒角

这种情况下，通常将倒角放置在一个更大元素的角落（通常是右上角）。

HTML结构：

<div class="card">
  <div class="badge">99+</div>
  <!-- 其他内容 -->
</div>

CSS样式：

.card {
  position: relative;
  width: 200px;
  height: 300px;
  background-color: #f1f1f1;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background-color: red;
  color: white;
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}

在这个示例中，.badge 是一个倒角元素，它被绝对定位在 .card 元素的右上角。你可以更改 .badge 的 top 和 right 属性来调整它的位置。

你也可以根据需要自由地添加更多的样式和内容。例如，你可以添加一个图标或者使用更复杂的布局和装饰。这只是一个简单的示例，用于说明如何使用CSS来实现这一点。