当前位置：首页 > CSS

css制作圆形标签

2026-04-02 01:28:45CSS

使用 `border-radius` 属性

通过将 border-radius 设置为 50%，可以将元素变为圆形。确保元素的宽度和高度相等，否则会变成椭圆形。

.circle-tag {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

使用 `clip-path` 属性

clip-path 可以更精确地裁剪元素为圆形，适合复杂场景。

.circle-tag {
  width: 50px;
  height: 50px;
  clip-path: circle(50% at 50% 50%);
  background-color: #e74c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

使用伪元素创建圆形标签

通过伪元素（如 ::before 或 ::after）生成圆形，适合动态内容。

.circle-tag {
  position: relative;
  padding-left: 60px;
}

.circle-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #2ecc71;
}

响应式圆形标签

结合 vw 或 % 单位，实现圆形标签的响应式缩放。

.circle-tag {
  width: 10vw;
  height: 10vw;
  max-width: 100px;
  max-height: 100px;
  border-radius: 50%;
  background-color: #f39c12;
}

添加文字和图标

圆形标签内通常包含文字或图标，需通过 Flexbox 或 Grid 居中内容。

.circle-tag {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #9b59b6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
}

边框和阴影效果

为圆形标签添加边框或阴影，增强视觉效果。

css制作圆形标签

.circle-tag {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1abc9c;
  border: 2px solid #16a085;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}