本文介绍使用 CSS 径向渐变（radial-gradient）精准实现右上角局部发光效果的方法，并配合 :hover 实现交互，避免 box-shadow 全边发光的局限性。
本文介绍使用 css 径向渐变（`radial-gradient`）精准实现右上角局部发光效果的方法，并配合 `:hover` 实现交互，避免 `box-shadow` 全边发光的局限性。
在 UI 设计中，局部高亮（如右上角微光）常用于引导用户注意力或增强按钮/卡片的现代感。但直接使用 box-shadow 很难精准控制发光区域——它默认向四周扩散，无法“聚焦”于右上角。真正的解决方案是利用 CSS 渐变背景：radial-gradient 支持指定光源位置（circle at top right），可模拟局部发光的视觉焦点。
以下是一个简洁、可复用的实现方案：
.glow-corner {
width: 250px;
height: 200px;
background: #242c31; /* 深色主背景 */
border-radius: 20px;
position: relative;
overflow: hidden;
}
/* 默认状态：右上角微弱发光（低透明度） */
.glow-corner::before {
content: '';
position: absolute;
top: -20%;
right: -20%;
width: 120%;
height: 120%;
background: radial-gradient(
circle at top right,
rgba(198, 135, 25, 0.6) 0%,
rgba(198, 135, 25, 0) 40%
);
z-index: 1;
}
/* 悬停时增强发光强度与范围 */
.glow-corner:hover::before {
background: radial-gradient(
circle at top right,
rgba(198, 135, 25, 0.9) 0%,
rgba(198, 135, 25, 0) 50%
);
}
<div class="glow-corner"></div>
✅ 关键要点说明：
- 使用 ::before 伪元素叠加发光层，不干扰原内容布局；
- radial-gradient(circle at top right, ...) 精确锚定光源在右上角；
- 通过调整透明度（rgba(..., alpha)）和扩散半径（第二色标百分比）控制“柔和度”；
- top: -20%; right: -20%; width/height: 120% 确保渐变完整覆盖并自然溢出，避免裁剪生硬边缘；
- 悬停时仅修改渐变参数，性能高效，无重排。
⚠️ 注意事项：
- 避免对 .glow-corner 直接设置 background（除基础色外），否则会覆盖 ::before 的渐变效果；
- 若容器有 overflow: hidden，需确保伪元素尺寸足够（如本例的 120%），否则发光被截断；
- 在深色主题中，推荐使用暖色（如 #C68719）增强对比；浅色背景则可选用蓝紫系（如 #4f46e5）保持协调。
这种基于渐变的方案比 box-shadow 更灵活、更轻量，且完全支持 CSS 动画过渡（可为 background 添加 transition: background 0.3s ease），是构建精致交互动效的推荐实践。
