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

 

.boder-txt {
  width: 80px;
  height: 30px; 
  line-height: 30px;
  padding: 5px;
  text-align: center;
  border-radius: 10px;
  border: 3px 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 属性 | 菜鸟教程