渐变边框和文本在 Safari 和 iPhone 设备上不起作用
我有渐变颜色的文本和边框底部的颜色，但没有按预期工作：
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};
`;
欢迎任何帮助/评论/建议:)
尝试在您的代码中实现此逻辑：
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%;
}