使用 box-shadow 配合 inset 关键字可实现内发光效果，语法为 box-shadow: inset 水平偏移 垂直偏移 模糊半径 阴影大小 颜色；建议使用 rgba 或 hsla 半透明色使光晕更自然，搭配 border-radius 圆角提升视觉柔和度，可通过叠加多层 inset 阴影创建如蓝白双层光效，结合伪元素或渐变增强立体感，合理调整参数即可实现美观真实的内发光。
想给容器添加内发光效果，可以直接使用 CSS 的 box-shadow 属性，并配合 inset 关键字来实现。inset 能让阴影从外投射变为向内嵌入，从而模拟出“内发光”的视觉效果。
基本语法
使用 inset 的 box-shadow 实现内发光，格式如下：
box-shadow: inset 0 0 模糊半径 阴影大小 颜色;说明：
- inset：表示阴影是内阴影
- 0 0：阴影的水平和垂直偏移（可调整方向）
- 模糊半径：值越大，光晕越柔和扩散
- 阴影大小：控制阴影的扩展范围
- 颜色：建议使用半透明颜色（如 rgba 或 hsla）更自然
示例代码
给一个 div 添加白色内发光效果：
立即学习“前端免费学习笔记（深入）”；
<div style="width:200px; height:100px; background:#333; border-radius:10px;
box-shadow: inset 0 0 10px 2px rgba(255,255,255,0.6);
margin:50px auto; color:white; text-align:center; line-height:100px;">
内发光
</div>
内发光
实用技巧
提升内发光的真实感和灵活性：
- 用 rgba(255,255,255,0.5) 这类颜色，避免纯白太刺眼
- 增加 border-radius 让发光边缘更自然，尤其对圆角容器
- 叠加多个 inset 阴影，实现多层光效（如先蓝后白）
- 结合伪元素或背景渐变，增强立体感
比如双层内发光：
box-shadow: inset 0 0 15px rgba(0, 120, 255, 0.4),
inset 0 0 5px rgba(255, 255, 255, 0.6);
基本上就这些，不复杂但容易忽略细节。用好 inset 和透明色，就能做出漂亮的内发光效果。 
