渐变边框和文本在 Safari 和 iPhone 设备上不起作用答案

【问题标题】：Gradient border and text is not working on Safari and IPhone devices渐变边框和文本在 Safari 和 iPhone 设备上不起作用
【发布时间】：2021-08-10 19:56:24
【问题描述】：

我有渐变颜色的文本颜色和边框底部，但无法按预期工作：
Safari（桌面）
iPhone (Safari)

截图：

这就是它在 Chrome 网页上的样子

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

这是它在 iPhone 12 Safari 上的样子

使用样式化组件编写的 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};
`;

欢迎任何帮助/评论/建议:)

【问题讨论】：

你能举个例子吗？

标签： html css ios sass

【解决方案1】：

尝试在你的代码中实现这个逻辑：

https://codepen.io/KnightOfInfinity/pen/jOBQPxz

代码:: html -

<html>
<body>
<p>Biometrics</p>
</body>
</html>

css -

/*  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%;
}

【讨论】：

【解决方案2】：

试试这个：

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-

【讨论】：

【解决方案3】：

我很早就遇到过这个问题，并且做了很多研究和开发，之后我喜欢了一个非常有用的解决方案。请在本地添加所有字体，下载您的字体的 .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");
}

【讨论】：

【解决方案4】：

可能问题与文本/边框渐变无关，我猜Tab 高度错误，文本只是被裁剪/隐藏

【讨论】：