如何使用 CSS 创建通知徽章？

通知徽章时不时弹出，大多数时候都让我烦恼，我相信大多数人都遇到过类似的事情，但无论如何，让我们看看如何使用 CSS 创建通知徽章。

步骤 1：HTML

具有“ base ”类的元素将充当配置文件图像或图标，我们将在其上定位具有“ indicator ”类的通知指示器元素。

第 2 步：CSS

首先，我们必须设置主“ base ”元素的高度和宽度。然后，我们将 border-radius 属性设置为 50%。边框半径会将边框的边缘圆化指定的值。在本例中，元素的高度和宽度相等，因此，当我们将边框半径设置为 50% 时，看起来是正方形的元素将变成圆形。

应用背景颜色后，基本元素将看起来像一个圆圈。

现在，将基元素的位置设置为“ relative ”，这意味着它将相对于其当前位置进行定位。这不会改变任何内容，但我们希望此属性能够定位子元素，稍后会详细介绍。

您还可以向基本元素添加图像而不是背景颜色，就像这样。

现在，让我们设计指标。

首先，将指示器的位置设置为“绝对”，这意味着它将位于位置为“相对”的祖先元素内。

然后，我们将通过设置指标的顶部、底部、右侧和左侧属性的值来定义指标的最终位置。

' bottom ' 属性将使 ' indicator ' 元素从 ' base ' 元素的底部偏移 ' base ' 元素高度的 60% 。

类似地，' left ' 属性将使 ' indicator ' 元素从 ' base ' 元素的左侧偏移 ' base ' 元素宽度的 60% 。

接下来，我们将添加一个与 ' body ' 元素颜色相同的边框，其边框半径为 50%。

然后，我们将设计通知计数器的样式。

为了使通知计数居中，我们可以向其父元素添加“ flex ”属性。

最终输出将是：