CSS3 实现边框圆角渐变色渐变文字效果

 

.boder-txt {width: 80px;height: 30px; line-height: 30px;padding: 5px;text-align: center;border-radius: 10px;border: 6rpx solid transparent;background-clip: padding-box, border-box;background-origin: padding-box, border-box;/*第一个linear-gradient表示内填充渐变色，第二个linear-gradient表示边框渐变色*/background-image: linear-gradient(#fff,#fff),linear-gradient(to right, #a392e8 0%, #ED5A45 80%);
}

<div class="boder-txt">背景</div>

background-clip: text; 是CSS中的一个属性，用于指定背景图片或颜色的裁剪方式，裁剪的区域是文本的轮廓。具体来说，就是将背景图片或颜色限制在文本的轮廓内，而不是整个元素的范围内。这个属性通常用于创建一些特殊的文本效果，比如文字渐变、文字填充等。 

.color-txt{font-size: 20px;background: linear-gradient(to right, #a392e8 0%, #45ed77 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

<view class="color-txt">我是彩色的文字</view>

参考:

CSS linear-gradient() 函数 | 菜鸟教程

CSS3 background-clip 属性 | 菜鸟教程