1.线性渐变
线性渐变由起始位置从color-1向对立方向过渡到color-n
background: -webkit-linear-gradient(起始位置，color 百分比,color 百分比);
例如：
<p style="background: -webkit-linear-gradient(top, #f1f1e0 0%,#cf9669 100%);">这是个P标签</p>
效果：
2.背景裁剪
背景裁剪，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉
background: -webkit-background-clip: text;
3.颜色填充
检索或设置对象中的文字填充颜色。通过text-fill-color属性，可以做出一些例如渐变文字和镂空文字的效果
background: -webkit-text-fill-color: transparent;
4.过度色
当前面三条一起使用时就可以达到为字体添加过度色的目的
例如
<html>
<head>
<style>
.text{
background: -webkit-linear-gradient(#f1f1e00%,#cf9669 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}
</style>
</head>
<body>
<p class="text">这是个P标签</p>
</body>
</html>
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
