截图:
使用样式化组件编写的 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>
/* 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%;
}
关于html - 渐变边框和文本在 Safari 和 iPhone 设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67639407/