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-前缀。- 叠加圆形的传统方法兼容性最佳，适合广泛使用。
