[分享]css两个圆叠加

在网页设计中，时常会用到两个圆形叠加的效果。这一特效可以使用CSS轻松实现，下面就是一段使用CSS实现两个圆叠加的代码。.circle { width: 50px; height: 50px; bor...

在网页设计中，时常会用到两个圆形叠加的效果。这一特效可以使用CSS轻松实现，下面就是一段使用CSS实现两个圆叠加的代码。

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: blue;
  position: relative;
}

.circle:before{
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
} 

这段CSS代码中，首先定义了一个圆形div，宽高都为50px，边框半径为50%，背景颜色为蓝色，这个圆形div的position设置为relative，表示它的位置是相对于父元素的。接下来，使用:before伪元素，也就是在圆形div之前插入一个元素。这个伪元素的content值为空，宽度和高度都为30px，设为了圆形，背景颜色为白色。此时，这个伪元素的位置是绝对定位的，恰好在之前定义的圆形div之内，使用top和left属性使其位置相对于前面那个圆形div下移10px和右移10px。

这样，两个圆位置和大小、颜色都已经定义好了。通过CSS中伪元素的使用，让两个圆形div叠加在一起，形成了两个圆形叠加的特效。