如何实现边框偏移？求复刻Figma样式的CSS解决方案

AI 小北

2026-6-15

复刻装饰标题样式的完善方案

根据参考样式，调整后的代码如下，主要修正了阴影颜色、优化了边框与阴影的配合，还原参考图的视觉效果：

HTML 代码

<div class="heading-decor">Text goes in hereee</div>

CSS 代码（box-shadow 实现方案）

.heading-decor {
  color: #192A51;
  background: #DCE8F8;
  border-radius: 70px;
  /* 用box-shadow实现黑色偏移边框效果 */
  box-shadow: 4px 4px 0 #000;
  padding: 12px 24px; /* 调整内边距让文字区域更舒展 */
  font-size: 26px;
  font-weight: 600;
  width: fit-content;
  border: none; /* 移除原边框，避免和阴影重叠 */
}

CSS 代码（伪元素实现精准偏移边框）

如果需要更清晰的双层偏移边框效果，可使用伪元素方案：

.heading-decor {
  color: #192A51;
  background: #DCE8F8;
  border-radius: 70px;
  padding: 12px 24px;
  font-size: 26px;
  font-weight: 600;
  width: fit-content;
  position: relative;
  border: 1px solid #000; /* 内层黑色边框 */
}

.heading-decor::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: -3px;
  bottom: -3px;
  border: 1px solid #000;
  border-radius: 70px;
  z-index: -1;
}