css发亮小圆点样式

CSS中的发亮小圆点样式通常用于创建焦点或悬停状态下的视觉反馈，例如链接、按钮或其他可交互元素。你可以通过伪类`:before` 或 `::after` 来添加这样的效果。以下是基本的代码示例：

/* 通用样式 */
.circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc; /* 可自定义背景颜色 */
}

/* 当元素获得焦点时，圆点变亮 */
.circle:focus::before {
  content: '';
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border: 2px solid white; /* 边框变白，增加亮度 */
  border-radius: 50%;
  z-index: 1; /* 确保圆点覆盖其他内容 */
}

在这个例子中，`.circle` 类的元素在聚焦时会显示一个小圆点，这个圆点由白色边框围绕，给人一种明亮的感觉。