如何为div元素仅在右上角添加带hover效果的发光效果

你可以用伪元素来实现局部的发光效果，避免box-shadow覆盖整个元素的问题。核心思路是在div右上角定位一个小的伪元素，给这个伪元素添加发光阴影，再通过hover状态调整阴影效果。

代码示例 #

<div class="glow-box">我是需要右上角发光的盒子</div>

.glow-box {
  position: relative;
  width: 200px;
  height: 150px;
  border: 1px solid #ddd;
  padding: 20px;
  /* 让伪元素相对于这个盒子定位 */
}

.glow-box::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  /* 隐藏伪元素本身，只保留阴影 */
  background: transparent;
  /* 初始的柔和发光阴影 */
  box-shadow: 0 0 8px rgba(50, 205, 50, 0.4);
  transition: box-shadow 0.3s ease;
  /* 让阴影只在右上角向外扩散，避免覆盖盒子 */
  border-radius: 0 0 0 4px;
}

.glow-box:hover::after {
  /* hover时增强发光效果 */
  box-shadow: 0 0 16px rgba(50, 205, 50, 0.8);
}

原理说明 #

• 给父div设置position: relative，让伪元素可以基于它定位到右上角。
• 伪元素本身设为透明，只利用它的box-shadow来产生发光效果，这样就不会影响原盒子的内容和布局。
• 通过transition实现hover时的平滑过渡，让发光效果更自然。

如果需要调整发光的范围或者颜色，直接修改伪元素的box-shadow参数即可——比如把颜色换成蓝色rgba(30, 144, 255, 0.8)，或者调整扩散半径改变发光大小。

内容的提问来源于stack exchange，提问作者antskat