17370845950

使用 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 和透明色，就能做出漂亮的内发光效果。