.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 属性 | 菜鸟教程