CSS 渐变圆角边框 + 渐变文字

最新推荐文章于 2024-09-21 23:59:03 发布

henono

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量256

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/zz51233273/article/details/121106090

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html代码：

<div class="textWrap">
    <div class="text">linear</div>
</div>

css代码(scss):

.textWrap{
  width: 100px;
  height: 30px;
  //渐变圆角
  background-image: linear-gradient(white,white),linear-gradient(142deg,#9a3fff 1%, #1c7bff 99%);
  padding: 1px;
  background-clip: content-box,padding-box;
  border-radius: 20px;
  //文字居中
  display: flex;
  justify-content: center;
  align-items: center;
  .text{
    //渐变文字
    background-image: linear-gradient(142deg,#9a3fff 1%, #1c7bff 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}