gpt4 book ai didi

html - 如何将线性渐变应用于圆的边界?

转载 作者:行者123 更新时间:2023-12-05 08:54:33 25 4
gpt4 key购买 nike

<分区>

我正在尝试在 ionic 中实现标签圆圈中的线性渐变,如下图所示:

enter image description here

首先,我使用以下代码在输入的开头做了一个圆圈:

//在 .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;
}

实现如下:

enter image description here

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

enter image description here

我更改了电子邮件标签的 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;
}

谁能指出我的错误?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com