如何修复透明边框超出渐变背景图像的问题

问题根源是CSS默认的背景起始范围是内边距框，渐变背景不会延伸到边框区域，导致透明边框无法显示背景效果。只需修改.bg-grad的CSS样式，让背景覆盖边框区域即可：

.bg-grad {
    background-image: linear-gradient(90deg, #FFB74A 0%, #FF4AA1 45%, #6F2BFF 100%);
    background-origin: border-box; /* 背景从边框位置开始绘制 */
    background-clip: border-box; /* 背景覆盖至边框区域 */
}

也可以用简写形式合并属性：

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

修改后，渐变背景会完整覆盖包括边框在内的整个元素区域，透明边框就能正常显示背后的渐变效果了。你的HTML代码无需改动：

<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>

内容的提问来源于stack exchange，提问作者Th3Wyv3rn