CSS画太阳主要用box-shadow多层叠加或repeating-conic-gradient配合遮罩模拟光芒，前者兼容性好（IE10+），后者现代简洁但需注意裁剪和Safari兼容性。
CSS 画太阳不是靠“画”，而是用 box-shadow 多层叠加或 repeating-conic-gradient 配合遮罩来模拟光芒——直接描边或 SVG 虽然可行，但纯 CSS 方案里，这两种最轻量、最可控。
用 box-shadow 叠出太阳光芒（兼容性好，IE10+ 可用）
原理是给一个圆形元素（sun）加几十层放射状阴影，每层旋转 + 偏移，形成光刺效果。关键不在“画线”，而在“投射”。
- 必须设
border-radius: 50%让基础圆心对齐 -
box-shadow的x/y偏移要为0，靠spread（扩散半径）撑出长度，再用transform: rotate()单独转每一层不现实，所以改用伪元素 +nth-child或 JS 生成多个span元素分别控制角度 - 更实用的做法：只用一层
box-shadow，但配合filter: blur(2px)+opacity降低强度，视觉上更柔和自然
div.sun {
width: 60px; height: 60px;
background: #FFD700;
border-radius: 50%;
box-shadow:
0 0 0 8px rgba(255, 215, 0, 0.4),
0 0 0 16px rgba(255, 215, 0, 0.2),
0 0 0 24px rgba(255, 215, 0, 0.1);
filter: blur(1.5px);
}
用 repeating-conic-gradient 切出光束（现代方案，简洁但需注意裁剪）
这是目前最接近“绘制光芒”的纯 CSS 手段：用色块交替的锥形渐变，在圆形遮罩下露出放射线条。问题常出在“光束太短”或“边缘发虚”。
- 必须套一层
clip-path: circle(50% at center)或用overflow: hidden+ 父容器border-radius，否则渐变会溢出成满屏扇形 -
repeating-conic-gradient(from 0deg, #FFD700 0deg 5deg, transparent 5deg 10deg)中的5deg是单束宽度，小于 3deg 人眼难分辨，大于 12deg 就不像光而像花瓣 - Chrome 对
conic-gradient支持良好，但 Safari 15.4+ 才稳定；若需兼容旧 Safari，得回退到radial-gradient模拟（效果偏软，无硬边）
为什么不用 outline 或 border？
因为它们无法径向发散——outline 是等距矩形框，border 是固定方向描边，强行旋转会导致光束根部错位、中心空洞、响应缩放时比例崩坏。有人试过 border-image 配合 SVG 图案，但加载、维护、高 DPI 下模糊等问题远超收益。
立即学习“前端免费学习笔记（深入）”；
- 真实项目中，如果太阳需响应式缩放，优先选
repeating-conic-gradient+em或clamp()控制尺寸，避免像素值写死 - 若要加动画（比如光芒脉动），
box-shadow的spread和opacity可以transition，但conic-gradient的角度不能直接过渡，得用background-position偏移 trick 或 JS 控制
真正麻烦的从来不是“怎么让太阳发光”，而是光与背景的融合度——深色背景要提高 opacity 和 blur 值，浅色背景则需加暗边或降低饱和度，否则看起来像贴纸。这点没有通用参数，得开浏览器调试器实时调。
