css制作月牙

使用CSS制作月牙形状

通过CSS的border-radius和box-shadow属性可以创建月牙形状。以下是两种常见方法：

方法一：利用圆形和遮罩

创建一个圆形元素，再通过box-shadow或伪元素遮挡部分区域形成月牙。

<div class="crescent"></div>

.crescent {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: 15px 15px 0 0 gold;
}

方法二：使用伪元素叠加

通过主元素和伪元素的叠加形成月牙缺口。

.crescent {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: gold;
}

.crescent::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: white;
}

方法三：使用clip-path

更精确控制形状路径，适合复杂月牙。

.crescent {
  width: 100px;
  height: 100px;
  background: gold;
  clip-path: path('M50 0A50 50 0 1 1 0 50A25 25 0 0 0 50 0Z');
}

调整参数说明

• box-shadow方法中第四个参数（扩张半径）需设为0
• 伪元素方法需确保背景色与父容器背景一致
• clip-path的路径需根据具体需求调整控制点

以上方法均支持添加动画效果，可通过transform或clip-path的变化实现月相变化动画。