css陌生知识点

1、渐变色
首先要清楚，渐变色是作用于属性background-image上的，一般简写到background上，切记不要混为background-color
其次由渐变色引发一个文字设置渐变色的需求：
实现方式一：

span {
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
         

　　实现思路为：background为元素的背景图（background-image）设置渐变色，
　　　　　　　　-webkit-background-clip: text来规定元素背景剪切的区域，一般有三个值border-box、border-box、content-box；而text兼容性不太好，它是指，以元素内的文字作为裁剪区域向外裁剪，

　　　　　　　　　　　　　　　　　　　　　文字所占的区域为元素的区域，文字之外的区域都将被剪掉；所有只留文字区域；

　　　　　　　　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 );
    }

这种方式，使用伪元素选择器:before和属性content向元素内插入内容，使元素本身内容与伪内容叠加，出现所要的效果

这里主要是一个mask属性，他其实就是mask-image，就是蒙版图片，叠加功能；mask-image与background-image一样，取值既能使图片也能使渐变色

2、涉及到content属性和attr方法
attr可以动态获取当前元素上的属性值，content可以向当前元素的前或后插入内容

另外，content的值还可以进行拼接

.contentBefore::before {
  content: "拼接"attr(data-text);
}

 

参考：https://segmentfault.com/a/1190000011882933