css制作月牙

使用CSS制作月牙形状

通过CSS的border-radius和box-shadow属性可以轻松实现月牙效果。以下是两种常见方法：

方法一：利用边框和圆角

通过设置两个圆形叠加，其中一个用overflow: hidden裁剪出月牙形状。

.moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: gold;
  position: relative;
  overflow: hidden;
}
.moon::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
  top: 10px;
  left: 20px;
}

方法二：使用径向渐变

通过CSS径向渐变直接绘制月牙形状，更简洁但兼容性稍差。

.moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 50%, transparent 40%, gold 40%);
}

方法三：box-shadow剪切

利用box-shadow的inset属性创建剪切效果。

.moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: gold;
  box-shadow: inset -15px 0 0 0 white;
}

动画效果增强

可以为月牙添加旋转动画模拟真实月相变化：

@keyframes moon-phase {
  0% { box-shadow: inset -30px 0 0 0 white; }
  50% { box-shadow: inset 0 0 0 0 white; }
  100% { box-shadow: inset 30px 0 0 0 white; }
}
.moon {
  animation: moon-phase 8s infinite linear;
}

浏览器兼容性提示

径向渐变方法在IE10及以下版本不支持，如需兼容旧浏览器建议采用第一种叠加方法。现代浏览器中所有方法均表现良好。