.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() 函数 | 菜鸟教程文章来源：https://www.toymoban.com/news/detail-605043.html
CSS3 background-clip 属性 | 菜鸟教程文章来源地址https://www.toymoban.com/news/detail-605043.html
到了这里，关于CSS3 实现边框圆角渐变色&&渐变文字效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
