css 小红点的样式

CSS小红点是一种常见的UI元素，可以用来表示未读消息、提示等。在CSS中，实现小红点的样式有多种方法，下面将介绍其中两种常用方式。

第一种方法是使用伪元素。具体实现如下：

   .dot {
          position: relative;
          width: 100px;
          height: 100px;
    }
    .dot::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: red;
    }

其中，伪元素::before用来插入一个元素到目标元素的前面，通过position和top/right属性使其定位在目标元素的右上角，再使用width和height属性设置它的大小。border-radius属性用来设置圆角，background-color属性设置背景颜色为红色。

第二种方法是使用文本阴影。具体实现如下：

    .dot2 {
          position: relative;
          width: 100px;
          height: 100px;
          text-shadow: 20px 0 0 red;
    }
    

其中，text-shadow属性用来设置文本阴影，第一个参数表示阴影水平偏移量，第二个参数表示垂直偏移量，第三个参数表示阴影的颜色。使用text-shadow属性来实现小红点的好处是可以把它应用到文字上，比如在某个标签中显示未读消息数。

以上就是实现CSS小红点的两种常用方法，可以根据实际需求选择适合自己的方式来应用在UI设计中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！