使用 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 添加白色内发光效果:
立即学习“前端免费学习笔记(深入)”;
内发光
实用技巧
提升内发光的真实感和灵活性:
- 用 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 和透明色,就能做出漂亮的内发光效果。










