以下渐变方式是通用的但是文字的渐变多了两行代码
之前只写过背景颜色渐变
background-image: linear-gradient(#e66465, #9198e5);
这次遇到了文字渐变的需求
<div>我要渐变</div>
div{background: linear-gradient(to bottom ,red ,black);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}
文字渐变必须加这两行代码
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
线性渐变 - 从上到下(默认情况下)
改变方向的话
从左到右的线性渐变:
background-image: linear-gradient(to right, red , yellow);
从左上角到右下角的线性渐变:
background-image: linear-gradient(to bottom right, red, yellow);
文字也是一样的道理