css制作月牙

使用CSS制作月牙形状

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

方法一：利用圆形叠加和遮罩

通过两个圆形叠加，其中一个偏移并隐藏部分区域形成月牙效果。

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

.moon::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  top: 10px;
  left: 50px;
}

方法二：使用clip-path裁剪

直接通过路径裁剪生成月牙形状，更精确但需要计算路径坐标。

.crescent {
  width: 100px;
  height: 100px;
  background: #f5d742;
  border-radius: 50%;
  clip-path: path('M50 0A50 50 0 1 1 0 50A50 50 0 0 1 50 0Z');
}

方法三：box-shadow模拟缺口

通过阴影覆盖部分圆形，模拟月牙缺口效果。

.moon-shadow {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: transparent;
  box-shadow: -15px 15px 0 0 #f5d742;
}

关键参数说明

• 尺寸调整：修改width和height改变月牙大小。
• 颜色调整：background或box-shadow颜色值控制月牙颜色。
• 形状微调：clip-path的路径参数或::after伪元素的偏移量可调整月牙弧度。

浏览器兼容性

• clip-path方法在较新浏览器中支持良好，旧版本需加-webkit-前缀。
• 叠加圆形的传统方法兼容性最佳，适合广泛使用。