效果图.png
<span class="word-score"><span>88积分兑换</span></span>
.word-score {
display: inline-block;
width: 4.96rem;
height: 0.87rem;
line-height: 0.87rem;
font-size: 0.34rem;
box-sizing:border-box;
border:0.02rem solid transparent;
background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(45deg,#fff,#fff),linear-gradient(45deg,rgba(40,220,200,1),rgba(5,165,250,1));
border-radius: 1rem;
}
.word-score span{
color:rgba(40,220,200,1);
background:linear-gradient(90deg,rgba(40,220,200,1) 0%,rgba(5,165,250,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
background-clip: border-box|padding-box|content-box;
| border-box | 背景延伸到边框外沿（但是在边框之下）
border-box.png
| padding-box | 边框下面没有背景，即背景延伸到内边距外沿。
padding-box .png
| content-box | 背景裁剪到内容区 (content-box) 外沿。
content-box.png
-webkit-background-clip: text;把文本内容之外的背景给裁剪掉
这里需要和另外一个css3属性配合使用，它就是-webkit-text-fill-color: transparent; 它是用来设置文字的填充色的，作用和指定color是一样的，不过它有一个取值非常有用：transparent，可以把文字填充色设为透明，这样的话就可以漏出后面背景的颜色了，也就是“文字镂空”效果。
background-origin: padding-box|border-box|content-box;
padding-box背景图像相对于内边距框来定位。测试
border-box背景图像相对于边框盒来定位。测试
content-box背景图像相对于内容框来定位。测试
