如何用CSS实现图片中上下粉色霓虹边框包裹文字的效果？

核心实现思路 #

通过CSS的border定义上下基础边框，搭配box-shadow实现霓虹发光效果，同时可按需调整细节优化视觉表现。

完整代码示例 #

<div class="neon-box">需要包裹的目标文字</div>

.neon-box {
  /* 基础文字与容器样式，可根据需求调整 */
  font-size: 2.5rem;
  padding: 1.2rem 0;
  text-align: center;
  
  /* 定义上下基础边框 */
  border-top: 3px solid #ff6fa1;
  border-bottom: 3px solid #ff6fa1;
  
  /* 霓虹发光核心效果 */
  box-shadow: 
    0 3px 12px #ff6fa1, /* 下边框向外发光 */
    0 -3px 12px #ff6fa1; /* 上边框向外发光 */
    
  /* 可选：给文字添加同色系霓虹效果，增强整体氛围感 */
  text-shadow: 0 0 6px #ff6fa1;
}

效果优化技巧 #

• 渐变霓虹效果：如果想要更柔和的发光过渡，可以叠加多层不同透明度的阴影：

box-shadow: 
  0 3px 6px #ff6fa1,
  0 3px 18px #ff8bb3,
  0 -3px 6px #ff6fa1,
  0 -3px 18px #ff8bb3;

• 自适应宽度：若需要边框仅包裹文字宽度，给容器添加inline-block属性：

.neon-box {
  display: inline-block;
}

• 亮度与粗细调整：修改border-width控制边框粗细，调整box-shadow的第三个值（模糊半径）改变发光范围，更换颜色值实现不同色调的霓虹效果。

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