通过CSS制作月亮，主要利用border-radius创建圆形基础，结合box-shadow的偏移与模糊属性生成月牙形状，或使用radial-gradient模拟月球表面纹理与明暗层次，设置一个圆形元素，通过box-shadow的inset内阴影或多个阴影叠加，形成月牙的凹陷效果；或用radial-gradient创建环形渐变，模拟月球表面的坑洼与光影，这种方法无需图片，代码简洁，可通过调整阴影位置、渐变色彩等参数实现不同形态的月亮，适配网页装饰或动画场景。
用CSS绘制月亮：从基础到创意的代码指南
月亮作为夜空中的经典意象，自古以来就承载着浪漫与神秘的色彩，在现代网页设计中，月亮元素常被用作背景、装饰或交互元素，为页面增添诗意与氛围，掌握用CSS绘制月亮的技巧，不仅能提升页面的视觉美感，还能通过代码实现灵活的动态效果，本文将从基础形状到创意进阶，带你一步步掌握用CSS制作月亮的代码技巧,助你在网页设计中呈现独特的月光魅力。
基础：绘制一个满月（圆形月亮）
最简单的月亮形态是正圆形，呈现满月的效果，这种基础形态的核心思路是利用CSS的border-radius属性将正方形元素转换为圆形,再填充适当的颜色即可完成。
代码实现
<div class="full-moon"></div>
.full-moon {
width: 120px; /* 设置宽度 */
height: 120px; /* 设置高度 */
background: #f5f5dc; /* 月亮颜色（米黄色） */
border-radius: 50%; /* 将正方形转为圆形 */
box-shadow: 0 0 20px rgba(245, 245, 220, 0.5); /* 添加柔和光晕 */
}
代码解析
width和height控制月亮的大小,两者相等时呈现正圆效果；border-radius: 50%是核心属性,将直角正方形转变为完美的圆形；background设置月亮的填充色，#f5f5dc是经典的月亮米黄色，也可替换为#fff8dc（玉米色）或#fffacd（柠檬色）,根据页面整体色调选择合适的颜色；box-shadow为可选效果，通过模糊和扩散模拟月光晕染,让月亮更具立体感和真实感。
进阶：绘制月相（新月、上弦月、残月）
真实的月亮会经历月相变化，从新月、上弦月、满月到下弦月、残月等不同形态，在CSS中实现这些效果的核心思路是通过"遮挡"部分圆形区域来模拟月相变化，这里介绍两种常用方法：伪元素遮挡法和圆锥渐变法。
方法1：伪元素遮挡法（适合新月、上弦月等）
通过一个"遮挡层"（伪元素）覆盖部分圆形,模拟月相阴影效果。
代码示例（上弦月）
<div class="moon-phase crescent"></div>
.moon-phase {
width: 120px;
height: 120px;
background: #f5f5dc;
border-radius: 50%;
position: relative; /* 为伪元素定位提供参考 */
}
.crescent::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #1a1a2e; /* 背景色（与页面背景一致） */
border-radius: 50%;
left: 30%; /* 调整遮挡位置，改变月相 */
top: 0;
}
效果解析
- 通过
after伪元素创建一个与月亮同大小的圆形，背景色与页面背景色相同（如深色背景用#1a1a2e）,遮挡部分月亮主体； - 调整
left值（或top/right/bottom）可改变遮挡位置：left: 0：新月（完全遮挡，仅剩边缘弧光，可微调left为负值露出边缘）；left: 30%：上弦月（右半圆被遮挡）；left: 50%：满月（无遮挡，需移除伪元素）；left: 70%：下弦月（左半圆被遮挡）。
技巧提示：为遮挡层添加transform-origin和rotate属性，可以创建更复杂的月相效果,如月牙形的弯曲变化。
方法2：圆锥渐变法（适合复杂月相）
使用conic-gradient（圆锥渐变）直接绘制月相，无需遮挡层,代码更简洁且性能更优。
代码示例（残月）
<div class="moon-phase-gibbous"></div>
.moon-phase-gibbous {
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(
from 90deg at 50% 50%,
#1a1a2e 0deg 270deg, /* 遮挡区域（270度扇形） */
#f5f5dc 270deg 360deg /* 月亮主体（90度扇形） */
);
}
效果解析
conic-gradient从90deg开始，绘制270deg的遮挡色（深色背景）和90deg的月亮色,形成残月效果；- 调整起始角度和角度范围，可实现不同月相（如新月用
0deg 10deg，仅留窄条弧光）； - 此方法的优势在于无需额外元素，减少DOM节点,提升渲染性能。
高阶：添加发光与动态效果
真实的月亮具有柔和的光晕，且可能缓慢移动或闪烁，通过CSS动画和高级阴影效果，我们可以模拟这些自然现象,让页面中的月亮更加生动。
月晕效果（柔和光晕）
使用多层box-shadow叠加，模拟月光扩散的渐变效果,营造梦幻氛围。
.moon-glow {
width: 120px;
height: 120px;
background: #f5f5dc;
border-radius: 50%;
box-shadow:
0 0 20px rgba(245, 245, 220, 0.8), /* 内层光晕 */
0 0 40px rgba(245, 245, 220, 0.5), /* 中层光晕 */
0 0 60px rgba(245, 245, 220, 0.3), /* 外层光晕 */
0 0 80px rgba(245, 245, 220, 0.1); /* 最外层光晕 */
}
月亮动态效果
缓慢移动动画
模拟月亮在天空中缓慢移动的效果：
.moon-moving {
animation: moonFloat 20s infinite ease-in-out;
}
@keyframes moonFloat {
0%, 100% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(30px) translateY(-20px);
}
50% {
transform: translateX(60px) translateY(0);
}
75% {
transform: translateX(30px) translateY(20px);
}
}
闪烁效果
模拟月光闪烁的微妙变化：
.moon-twinkle {
animation: twinkle 3s infinite alternate;
}
@keyframes twinkle {
0% {
opacity: 0.9;
filter: brightness(1);
}
100% {
opacity: 1;
filter: brightness(1.1);
}
}
创意应用：组合效果与场景设计
组合月相与动态效果
将月相变化与动态效果结合,创建更丰富的视觉体验：
.creative-moon {
width
