用 CSS 包围在顶部和底部边框之间的文本

Question

我想复制照片中的效果，上面和下面有粉红色的霓虹灯边框，并且文字包含在它们之间。我怎样才能用 CSS 实现这一点？我试过了，但达不到同样的效果

谢谢你

Answer 1

最简单的方法是使用带有

filter: drop-shadow()

的 SVG 形状。
这是一个带有闪烁霓虹灯动画的类似 SVG 形状的示例

body {
  background: #111;
  font: 1rem/1.4 system-ui;
}

path {
  stroke: #ffe9ff;
  animation: neon 0.01s alternate infinite;
  filter: drop-shadow(0 0 0.03px hsl(280 90% 60%)) drop-shadow(0 0 0.05px hsl(280 90% 50%)) drop-shadow(0 0 1px hsl(280 90% 50%));
}

@keyframes neon {
  80% {
    filter: drop-shadow(0 0 0.02px hsl(300 90% 50%)) drop-shadow(0 0 0.03px hsl(300 90% 50%)) drop-shadow(0 0 1px hsl(280 90% 50%));
  }
}

h1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-size: 4rem;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  
  span {
    font-size: 1.86em;
  }

  svg {
    width: 4em;
    & ~ svg {
      rotate: 180deg;
    }
  }
}

<svg style="display:none;">
  <defs>
    <symbol id="neon">
      <path d="M.15,.45 .15,.15 .85,.15 .85,.45" fill="none" stroke-width="0.04" stroke-linecap="round" filter="url(#neon)"></path>
    </symbol>
  </defs>
</svg>


<h1>
  <svg viewBox="0 0 1 0.6"><use href="#neon" /></svg>
  6 Giugno 2024<br><span>Milano</span>
  <svg viewBox="0 0 1 0.6"><use href="#neon" /></svg>
</h1>