如何将线性渐变应用于圆的边界？

Question

我试图在标签的圆圈中实现线性渐变，如下图所示ionic：

起初，我使用以下代码在输入开始处画了一个圆圈：

// 在 .html 中

<ion-item class="wrapper border-radius-23">
  <ion-label class="email-label">
    <ion-icon name="person" class="text-red"></ion-icon>
  </ion-label>
  <ion-input clearInput type="text" placeholder="Email" class="user-email-input"></ion-input>
</ion-item>

// 在 .scss 文件中

  .user-email-input {
    height: 46px;
    width: 100%;
    display: block;
    border-radius: 23px;
    box-sizing: border-box;
    padding-left: 50px;
    outline: none;
  }

  .email-label {
    border-radius: 50%;
    border: 2px solid red;
    position: absolute;
    top: -13px;
    left: 0;
    width: 46px;
    height: 46px;
    z-index: 9;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

并实现如下：

现在，当我尝试在圆圈中应用渐变时，我只能实现如下：

我更改了电子邮件标签的 css，如下所示：

.email-label {
        border-image: linear-gradient(to right, red 0%, orange 100%);
        border-image-slice: 1;
        border-radius: 50%;
        border: 2px solid;
        position: absolute;
        top: -13px;
        left: 0;
        width: 46px;
        height: 46px;
        z-index: 9;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
      }

谁能指出我的错误？

Answer 1

您可以按如下方式制作渐变圆：

.rounded {
  width: 100px;
  height: 100px;
  border: 4px solid transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), linear-gradient(to right, red, orange);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="rounded"></div>