首页 前端知识 CSS3 实现边框圆角渐变色&&渐变文字效果

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

2024-03-05 09:03:53 前端知识 前端哥 445 478 我要收藏

 

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3251.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!