如何修复透明边框超过渐变背景图像

Question

我目前有一个带有渐变的 div 作为背景图像。

但是，我遇到的问题是透明边框有一些奇怪的问题，这是由于背景图像没有覆盖边框所覆盖的区域而引起的。 正在发生的事情的图像

这就是我目前拥有的：

<div className="flex items-center justify-center gap-2 bg-grad rounded-full px-3 py-20 border-[3px] border-white/30">
    <p className="text-xl font-semibold text-white">Our Mission</p>
    <Image src="/rocket_launch.svg" alt="" width={10} height={10}/>
</div>

.bg-grad 定义为：

.bg-grad {
    background-image: linear-gradient(90deg, #FFB74A 0%, #FF4AA1 45%, #6F2BFF 100%);
  }

Answer 1

您可以使用大于100%（水平）的

background-size

和-3px的水平背景位置，如本例所示（一些设置是猜测的，但从示例中应该可以清楚原理）：

.bg-grad {
  background-image: linear-gradient(90deg, #FFB74A 0%, #FF4AA1 45%, #6F2BFF 100%);
  background-position: -3px 0;
  background-size: 105% 100%;
}

.other_stuff {
  display: inline-block;
  border: 3px solid transparent;
  padding: 12px;
  border-radius: 20px;
}

<div class="bg-grad other_stuff">This is the text</div>