📝 代码查看
使用runcode.html页面

1
查看次数
2025-11-07
创建时间
2025-11-07
最后更新
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css'><div class="btn btn-primary btn-round btn-3d-stripe leading-snug">
  <span class="text-stroke text-stroke-red-1 text-2xl font-bold whitespace-no-wrap" data-stroke-text="3D条纹描边按钮">3D条纹描边按钮</span>
  <div class="stripe-border"></div>
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: var(--polka-bg);
}

@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {
  position: absolute;
  top: $top;
  left: $left;
  width: $width;
  height: $height;
}

@mixin inset($inset: 0) {
  position: absolute;
  top: $inset;
  left: $inset;
  right: $inset;
  bottom: $inset;
}

:root {
  --orange-color-1: #fead54;
  --orange-color-2: #ff9e51;
  --red-color-1: #5f1717;
  --red-color-2: #f6566d;
  --red-color-3: #ffe9f0;
  --yellow-color-1: #fee64d;
  --polka-bg: radial-gradient(var(--orange-color-2) 20%, transparent 0) 0 0 /
      30px 30px,
    radial-gradient(var(--orange-color-2) 20%, transparent 0) 15px 15px / 30px
      30px,
    linear-gradient(var(--orange-color-1), var(--orange-color-1)) 0 0 / 100%;
  --primary-color: var(--yellow-color-1);
}

.text-stroke-red-1 {
  --stroke-outer-color: var(--red-color-1);
}

.stripe-border {
  --stripe-width: 0.5rem;
  --stripe-deg: 45deg;
  --stripe-offset-1: 2px;
  --stripe-offset-2: 1rem;
  --stripe-inset: calc(var(--stripe-width) * -1);

  &::before {
    @include inset(var(--stripe-inset));
    content: "";
    z-index: -1;
    background: repeating-linear-gradient(
      var(--stripe-deg),
      var(--stripe-color-1) 0 var(--stripe-offset-1),
      var(--stripe-color-2) 0 var(--stripe-offset-2)
    );
    border-radius: var(--stripe-radius);
  }
}

.btn {
  --btn-padding: 0.35rem 1.25rem;

  &-3d-stripe {
    --stripe-color-1: var(--red-color-1);
    --stripe-color-2: var(--red-color-2);
    --btn-bg-2: var(--red-color-3);
    --stripe-radius: 30px;

    border: 3px solid var(--stripe-color-1);
    box-shadow: 0 0 0 6px var(--btn-bg-2), 0 0 0 9px var(--stripe-color-1);

    .stripe-border {
      @include cover(0.06rem, 0.03rem, calc(100% + 9px), calc(100% + 9px));

      &::before {
        border: 3px solid var(--stripe-color-1);
      }
    }
  }
}
暂无JavaScript代码

👁️ 实时预览