如何制作圆形红色信息提示点

示例代码

.circle-container {
  position: relative;
  width: 25rpx; /* 圆形的直径 */
  height: 25rpx; /* 圆形的直径 */
  background-color: red; /* 红色背景 */
  border-radius: 50%; /* 圆形 */
  color: white; /* 白色字体颜色 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5rpx white; /* 添加白色圆圈 */
  margin-left: -25rpx;
}

.number {
  font-size: 18rpx; /* 调整字体大小 */
  z-index: 1; /* 确保文本在圆形的上层 */
}

<view decode="decode" class="circle-container">
                      <text class="number">1</text>
                    </view>