边框 文字同时渐变，保持边框border-radius

效果图.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背景图像相对于内容框来定位。测试