CSS渐变字体

最新推荐文章于 2024-01-16 06:17:19 发布

wj1713520

最新推荐文章于 2024-01-16 06:17:19 发布

阅读量834

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/wj1713520/article/details/126450912

版权

CSS 专栏收录该内容

11 篇文章

订阅专栏

CSS

h2 {
  display: inline-block;
  background-image: linear-gradient(to right, 颜色1, 颜色2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

1.将h2块元素转为行内块

2.设置背景渐变色

3.背景剪切蒙版

4.文字改为透明色

tailwindCSS

<h2 className="text-[3.5rem] uppercase font-[700] bg-gradient-to-r from-[rgba(126,213,111)] to-[rgba(40,180,131)] inline-block bg-clip-text text-transparent">
          exciting tours for adventurous people
</h2>

// 关键代码
bg-gradient-to-r from-[rgba(126,213,111)] to-[rgba(40,180,131)] // 设置背景渐变色
inline-block // 转换为行内块元素
bg-clip-text // 设置文字剪切蒙版
text-transparent // 设置文字为透明色