如何在边框样式中添加衬垫渐变？

Question

在这里，我有一个圆形徽章。 下面是它的代码

 .center-badge { background: #09a49c; height: 120px; width: 120px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; border: 10px solid #f2f2f2; position: absolute; top: -50px; left: -30px; line-height: 16px; }.center-badge p { font-size: 12px; color: var(--white); margin-bottom: 0px; }.center-badge p strong { display: block; font-size: 16px; }

 <div class="center-badge"> <div> <p>Taux </p> <p>codemandeur</p> </div> </div>

现在我被要求将边框颜色添加为linear-gradient(#fbfbfb, #c5d4dd) 。 但这仅适用于背景图像。 我添加了类似的东西，但它覆盖了我的全身颜色。 请帮我解决这个问题

.center-badge {
    background: #09a49c;
    height: 120px;
    width: 120px;
    border-radius:50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -50px;
    left: -30px;
    line-height: 16px;
    border: 10px solid transparent;
    background-image: linear-gradient(#fbfbfb, #c5d4dd);
    background-origin: border-box;
    background-repeat: no-repeat;  
}

我相信重复的背景是问题所在。 如何将此线性渐变应用为边框

Answer 1

我在我的项目中使用了这个。 它会起作用的。

.center-badge {
  ...
  background-image: linear-gradient(#09a49c , #09a49c),
                    linear-gradient(to right, #fbfbfb, #c5d4dd);
  background-origin: border-box;
  border: double 0.2em transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  ...
}