如何仅在 div 的右上角添加悬停发光效果-html教程-PHP中文网

通过 CSS 的 radial-gradient 背景配合 :hover 伪类，可精准实现仅在元素右上角区域呈现渐变发光效果，避免 box-shadow 全向扩散的问题。

通过 css 的 `radial-gradient` 背景配合 `:hover` 伪类，可精准实现仅在元素右上角区域呈现渐变发光效果，避免 `box-shadow` 全向扩散的问题。

要实现在

元素仅右上角出现柔和发光（且带悬停交互），核心思路是：放弃全向的 box-shadow，改用定位精准的径向渐变（radial-gradient）作为背景叠加层，并结合 :hover 控制其显隐或强度变化。

以下是一个完整、可直接运行的示例：



<style>
.glow-corner {
  position: relative;
  width: 250px;
  height: 200px;
  background-color: #242c31; /* 深灰主色 */
  border-radius: 20px;
  overflow: hidden;
  transition: background 0.3s ease; /* 平滑过渡 */
}

/* 默认状态：无发光 */
.glow-corner::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(
    circle at 100% 0%, 
    rgba(198, 135, 25, 0.7) 0%, 
    rgba(198, 135, 25, 0) 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 悬停时：右上角发光显现 */
.glow-corner:hover::before {
  opacity: 1;
}

/* 可选：增强发光感，添加轻微模糊（需配合 backdrop-filter 或额外伪元素） */
.glow-corner:hover::after {
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 140px; height: 140px;
  background: radial-gradient(
    circle at 100% 0%, 
    rgba(198, 135, 25, 0.3) 0%, 
    transparent 70%
  );
  filter: blur(12px);
  z-index: -1;
}
</style><div class="glow-corner"></div>

✅ 关键要点说明：

使用 ::before 伪元素精确定位到 top: 0; right: 0，并通过 radial-gradient(circle at 100% 0%) 将渐变中心锚定在右上角；
opacity 过渡替代显隐切换，避免布局抖动；
filter: blur() 配合低透明度的 ::after 层可模拟更自然的“辉光发散”效果（注意：blur() 对性能稍有影响，生产环境建议测试）；
所有尺寸（如 120px）和颜色值均可按设计需求调整——增大半径/提高透明度可增强发光范围与强度。

⚠️ 注意事项：