css - 给一个元素添加两种背景颜色

Question

是否可能有这样的东西:所以我有一个元素

 <span class="custom"> 6 </span>

有这个CSS:

 background: lightblue;
 color: white;
 border-radius: 50px;

选中时。这创建了圆圈。但我需要的是这个元素也有一个浅蓝色的背景，不是圆形的。是否有可能以某种方式实现这一目标并使元素具有两个背景？圆圈一在上面？

Answer 1

您可以有一个 div 容器，其中包含线性渐变背景，另一个 div 包含使用 flexbox 在中心对齐 6 的圆形 div。

.bg {
  background: linear-gradient(to right, #eeeeee 50%, #aaaaff 0%);
  width: 80px;
  margin: 20px;
}

.custom {
  margin: 0 auto;
  width: 50px;
  height: 50px;
  background: #7070ff;
  color: white;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="bg">
  <div class="custom"> 6 </div>
</div>