霓虹发光按钮
霓虹发光按钮：多层 box-shadow（内发光 + 外发光）+ 文字阴影，模拟灯管效果。悬停时增强发光范围并加上轻微缩放，配合深色背景效果最佳。
进阶玩法：用 text-shadow 给文字加发光，用 filter: drop-shadow 让不规则图形发光；再加 animation 做呼吸闪烁，就是完整的“霓虹招牌”效果。
- box-shadow 可叠加多层：0 0 5px, 0 0 15px, 0 0 30px 逐层扩散
- 文字发光用 text-shadow 多层叠加同色
- 配合 @keyframes 呼吸动画 = 霓虹灯闪烁感
HTML
<style> body { background: #14121f; } .neon { display: block; width: 200px; margin: 50px auto; padding: 14px 0; text-align: center; border: 2px solid #ff4de1; border-radius: 10px; color: #fff; font-size: 16px; letter-spacing: 2px; text-shadow: 0 0 8px #ff4de1, 0 0 20px #ff4de1; box-shadow: 0 0 8px #ff4de1, 0 0 20px rgba(255,77,225,.6), inset 0 0 8px rgba(255,77,225,.5); transition: all .3s ease; cursor: pointer; background: transparent; } .neon:hover { box-shadow: 0 0 15px #ff4de1, 0 0 45px #ff4de1, inset 0 0 15px rgba(255,77,225,.8); transform: scale(1.05); } </style> <button class="neon">NEON 按钮</button>
本节要点霓虹 = 多层 box-shadow 内外发光 + text-shadow 文字发光；深色背景是前提。
