用 border-radius 做弯月最稳，通过大圆底色+小圆同色遮罩实现，避免 clip-path 兼容性问题；box-shadow 模拟光晕，transform: rotate() 控制朝向，vw 与媒体查询结合适配多端。
用 border-radius 做弯月最稳，别碰 clip-path（兼容性坑多）
纯 CSS 画月亮，核心是「遮掉圆的一部分」。最可靠的方式是用两个圆形叠加：一个大圆作底（比如深色背景），一个小圆盖在上面（同背景色或透明），靠 border-radius 控制小圆的“裁剪弧度”。clip-path 虽然写起来短，但 Safari 旧版、IE 全系不支持，且百分比值在不同缩放下容易偏移，实际项目里容易出错。
实操建议：
- 父容器设为
position: relative，确保子元素定位可控 - 主圆用
width/height固定尺寸，避免响应式缩放导致弧度变形 - 小圆用
position: absolute偏移到合适位置，再通过border-radius: 50%保证它是正圆 - 关键技巧：把小圆的
background设成和父容器一致，视觉上就“挖掉”了一块
box-shadow 模拟月晕光边，比伪元素更轻量
真实月亮常带柔边光晕，用 ::before/::after 加一层渐变圆会增加 DOM 节点和样式复杂度。直接在主圆上叠两层 box-shadow 更干净：
box-shadow: 0 0 20px #fff8e6, 0 0 40px rgba(255, 232, 230, 0.4);
注意点：
- 第一层用实色模糊模拟高光边缘，第二层用透明度更低的同色系扩大光晕范围
- 避免用
inset，它会让光晕向内收缩，失去“发散感” - 数值别设太大，否则在小尺寸容器里会溢出不可见
用 transform: rotate() 控制月相朝向，别硬调 left/top
想让弯月朝左或朝右，常见错误是反复调 left 值去“挪”小圆。其实只需给小圆加 transform: rotate(90deg)，配合 transform-origin 定义旋转中心，就能自然切换月牙开口方向。
例如朝右的弯月：
.moon::after {
content: '';
position: absolute;
width: 120%;
height: 120%;
background: #1a1a1a;
border-radius: 50%;
top: -10%;
left: -10%;
transform: rotate(90deg);
transform-origin: center;
}
要点：
-
width/height超过 100% 是为了确保旋转后仍能完整覆盖主圆 -
transform-origin必须设为center，否则旋转轴心偏移，缺口位置失控 - 旋转角度每增减 45°，月相形态变化明显，适合做动画过渡
移动端适配时，vw 比 px 更安全，但得防极端窄屏
用 vw 单位能让月亮随视口等比缩放，但手机横屏切竖屏瞬间可能触发重绘抖动；而固定 px 在大屏上又太小。折中方案是用 minmax(40px, 8vw) 或媒体查询兜底：
.moon {
width: 8vw;
height: 8vw;
}
@media (max-width: 480px) {
.moon { width: 40px; height: 40px; }
}
容易被忽略的是：小圆的偏移量（如 top: -10%）必须用百分比或 vw，不能混用 px，否则缩放后缺口错位。
真正难的是让月牙弧度在各种尺寸下都“像月亮”，不是几何正确就行——得靠人眼微调 border-radius 和遮罩偏移量，这个没法自动化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
