用radial-gradient实现发光需三要素：显式指定圆心at center、用circle或closest-side约束形状、多层background叠加加box-shadow。必须写radial-gradient(circle at center, #fff, transparent)，配合no-repeat/100% 100%防平铺，并加box-shadow模拟环境光溢出。
直接用 radial-gradient 配合 background 和 box-shadow 就能做出由内而外的发光感，但多数人漏掉关键控制点：圆心定位、尺寸约束和图层叠加顺序。
radial-gradient 圆心必须显式指定 at center
默认 radial-gradient(#000, #fff) 会按 ellipse at farthest-corner 渲染，在非正方形按钮里极易拉伸变形，看起来像“偏光”而不是“发光”。
- 写死
radial-gradient(circle at center, #fff, transparent)才能保证正圆居中 - 如果按钮宽高不等，用
closest-side替代circle：例如radial-gradient(closest-side at center, #fff, transparent)，它会自动取最短边为半径，避免裁剪 - 千万别写成
radial-gradient(center, circle, ...)——at是关键字，漏了整个声明失效
发光强度靠多层 background 叠加实现
单层径向渐变只能模拟“晕开”，真正发光需要明暗层次：一层高亮白光 + 一层柔和扩散 + 底层主色。
- 推荐写法：
background: radial-gradient(circle at center, #ffffff 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 80%), #4e8cff - 注意顺序：从上到下是绘制顺序，最上面一层最靠近用户，所以高亮要放最前
- 透明度过渡点（如
70%）不能设太小，否则光晕太窄；也不宜超过85%，否则边缘发虚失真
button 元素需配合 box-shadow 增强立体光效
纯渐变只作用于背景区域，没有环境光反馈。真实发光必然伴随外围柔光溢出，这得靠 box-shadow 补足。
立即学习“前端免费学习笔记（深入）”；
- 加一层大范围低透明度阴影：
box-shadow: 0 0 24px 8px rgba(255,255,255,0.4) - 避免用
inset阴影——它往里收，和“发光”逻辑相反 - 如果按钮有
border-radius，确保box-shadow的模糊半径 ≥ 圆角值，否则光晕在拐角处断裂
最容易被忽略的是：所有径向渐变层都必须配 no-repeat / 100% 100%，否则在缩放或 flex 布局下会平铺或错位。这不是可选项，是必须项。
