Html 渐变边框和文本在Safari和IPhone设备上不起作用

我的文本和边框底部颜色为渐变色，但在以下情况下无法正常工作：

Safari（桌面版）

iPhone（Safari）

截图：

这就是它在Chrome web上的外观

这就是它在Safari（桌面）上的外观

这就是它在iPhone12Safari上的外观

使用样式化组件编写的CSS代码：

export const Tabs = styled.ul`
    display: flex;
    width: 100%;
    margin-top: 2em;
`;

export const Tab = styled.li`
    display: flex;
    ${fontStyles[fontSizes.eighteen]};
    border-bottom: 3px solid transparent;
    background-image: linear-gradient(rgba(0, 145, 148, 1), rgba(72, 71, 112, 1)),
        ${colors.gradientGreen};
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px ${colors.offWhite} inset;
    cursor: pointer;
    outline: none;
`;

export const Span = styled.span`
    font-weight: 800;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-image-source: ${colors.gradient};
    background-image: ${colors.gradientGreen};
`;

欢迎提供任何帮助/意见/建议：）

尝试以下方法：

export const Tab = styled.li`
display: flex;
${fontStyles[fontSizes.eighteen]};
border-bottom: 3px solid transparent;
background-image: -webkit-linear-gradient(rgba(0, 145, 148, 1), rgba(72, 71, 112, 1)),
    ${colors.gradientGreen};
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px ${colors.offWhite} inset;
cursor: pointer;
outline: none;`;

---

我在linear gardient之前添加了

-webkit-

，尝试在代码中实现此逻辑：

代码：： html-

---

我以前遇到过这个问题，之后做了很多研究和开发，我喜欢一个非常有用的解决方案。请在本地添加所有字体，下载字体的.eot、.woff、.woff2、.ttf和.svg文件，并将其添加到css文件中，例如：

@font-face {
font-family: Gotham_Book;
font-display: swap;
src: url(../Fonts/GothamBook.eot);
src: url(../Fonts/GothamBook.eot?#iefix) format("embedded-opentype"), url(../Fonts/Gotham-Book.woff2) format("woff2"), url(../Fonts/GothamBook.woff) format("woff"), url(../Fonts/GothamBook.ttf) format("truetype"),
    url(../Fonts/GothamBook.svg#svgFontName) format("svg");
}

---

可能这个问题与文本/边框渐变无关，我想

选项卡

高度是错误的，文本刚刚被裁剪/隐藏

你能举个例子吗？

/*  gradient variable */
:root{
  --gradient: linear-gradient(to right, yellow, green);
}
/*
  align items to center inside the body
*/
body{
  display: flex;
  justify-content: center;
  align-items:center;
  background: #121212;
}

/* real useful code  */
/*    text    */
p{
  display:block;
  height: contain;
  max-width: max-content !important;
  font-size: 63px;
  font-weight: 900;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: red;
}
/*    underline   */
p:after {
    content: '\00a0';
    background-image:
      var(--gradient);
    background-size: 100% 12px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}

@font-face {
font-family: Gotham_Book;
font-display: swap;
src: url(../Fonts/GothamBook.eot);
src: url(../Fonts/GothamBook.eot?#iefix) format("embedded-opentype"), url(../Fonts/Gotham-Book.woff2) format("woff2"), url(../Fonts/GothamBook.woff) format("woff"), url(../Fonts/GothamBook.ttf) format("truetype"),
    url(../Fonts/GothamBook.svg#svgFontName) format("svg");
}