css实现渐变斜体字

最新推荐文章于 2023-12-04 10:45:57 发布

虚诚

最新推荐文章于 2023-12-04 10:45:57 发布

阅读量442

点赞数

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

本文链接：https://blog.csdn.net/qq_43614064/article/details/126507047

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文解析了如何使用CSS的`-webkit-background-clip:text`和`linear-gradient`属性，结合HTML结构，创造出独特的村晚场景效果。通过实例展示了如何将底纹渐变应用到文字上，提升网页设计的艺术感。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述
html：

<div>
  <div class="up">村晚</div>
  <div class="bottom">场景</div>
</div>

css：

div{
  font-style:italic;
  font-size:40px;
  font-weight:800;
}
.up{
  padding-right:2px;
  display:inline-block;
  //下面是关键-----3句---------
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to bottom right,rgb(255,91,69),   rgba(255,164,161,.3));

}
.bottom{
  color:#333 !important
}