实现文字颜色的渐变
首先:给外层div来一个渐变。
其次:用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪;
最后:把文字变透明:可以用rgba给文本填充透明颜色或者直接设置color: transparent;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字渐变</title>
<style type="text/css">
#one{
margin: 0 auto;
width: 300px;
height: 100px;
background: -webkit-linear-gradient(left ,red,orange,blue,green);
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<div id="one">
我是one我是one我是one我是one我是one我是one我是one我是one我是one我是one我是one我是one我是one
</div>
</body>
</html>
有的浏览器不支持 这个属性, 所以需要使用@supports
@support是 可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。
例如:
@supports (display: grid) {
div {
display: grid;
}
}