css字体渐变色
2019-03-28 本文已影响0人
苏本的书柜
image.png
css字体渐变色
第一种方式
-webkit-line-clamp: 2;
background-image: -webkit-linear-gradient(bottom, rgba(251,84,62,1),rgba(245,134,89,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
常用
第二种方式
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
第三种方式
h1{
position: relative;
color: yellow;
}
h1:before{
content: attr(text);
position: absolute;
z-index: 10;
color:pink;
-webkit-mask:linear-gradient(to left, red, transparent );
}
<h1 text="前端简单说">前端简单说</h1>
