css制作月牙

使用CSS制作月牙形状

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

方法一：利用圆角与遮罩

创建一个圆形元素，通过调整边框和背景色形成月牙：

.crescent {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: transparent;
  border: 10px solid #f5d742;
  border-right-color: transparent;
  transform: rotate(45deg);
}

原理是通过将右侧边框设为透明，配合旋转形成月牙缺口。

方法二：使用伪元素叠加

通过伪元素创建两个圆形叠加形成月牙：

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

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

调整伪元素的位置和大小可控制月牙的弧度。

进阶效果：添加阴影动画

为月牙添加发光效果：

.crescent {
  box-shadow: 0 0 15px #f5d742;
  transition: box-shadow 0.3s;
}

.crescent:hover {
  box-shadow: 0 0 30px #f5d742;
}

注意事项

1. 现代浏览器推荐使用clip-path实现更复杂的形状控制
2. 考虑使用CSS变量便于调整颜色和尺寸：

   :root {
   --moon-color: #f5d742;
   --moon-size: 100px;
   }