css实现文字渐变

字体颜色渐变

字体颜色渐变

这里有几个知识点：

1.content属性的值除了使用文本之外，还可以直接访问读取标签的一些属性值。使用的方法是： attr();

2. -webkit-mask 主要是用来给一个元素添加一个蒙版。蒙版可以是透明的png图片也可以是CSS3的渐变效果。

<h1 class="" text="字体颜色渐变">字体颜色渐变</h1><h1 class="beauty-font" text="字体颜色渐变">字体颜色渐变</h1><style>h1,.beauty-font {/*display: inline-block;*/font-size: 80px;position: relative;color: red;margin-bottom: 100px;}.beauty-font:after {content: attr(text);position: absolute;top: 0;left: 0;z-index: 2;color: black;opacity: 0.5;-webkit-mask: -webkit-gradient(                linear,                left top,                right top,                from(rgba(0,0,0,0.1)),                to(rgba(0,0,0,1)));    );}.beauty-font:before {content: attr(text);position: absolute;top: -100px;left: 0;z-index: 2;color: black;opacity: 0.5;-webkit-mask: -webkit-gradient(                linear,                left top,                right top,                from(rgba(0,0,0,0.1)),                to(rgba(0,0,0,1)));    );}</style>