CSS 文字渐变
HTML代码<div class="gradient1">
<span>渐变1 - 菜鸟工具</span>
</div>
<h2 class="text-gradient" data-text="渐变2 - 菜鸟工具">渐变2 - 菜鸟工具</h2>CSS 代码
.gradient1 span {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
.text-gradient {
display: inline-block;
font-family: '微软雅黑';
font-size: 2em;
position: relative;
}
.text-gradient::after {
content: attr(data-text);
color: green;
position: absolute;
left: 0;
z-index: 2;
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}
页:
[1]