css3 制作文字特效渐变 text-shadow

最新推荐文章于 2024-07-01 15:53:36 发布

Lisa

最新推荐文章于 2024-07-01 15:53:36 发布

阅读量1.2k

点赞数

文章标签：渐变字体阴影阴影

本文链接：https://blog.csdn.net/weixin_43565197/article/details/99674749

版权

这篇博客介绍了如何使用CSS3来创建文字渐变和阴影效果，以提升网页文字的视觉吸引力。通过两种方法实现文字渐变，并解释了`background-clip`和`-webkit-text-fill-color`属性的作用。此外，还讲解了HSL颜色模型以及如何设置字体阴影。最后，展示了渐变和阴影叠加的最终效果。

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

在一些广告页/单页上，UI设计的时候往往用上渐变色或者字体阴影来美化文字，这种一般只能用图片来代替文字，但有时为了能有更好的复用性，我们今天用纯css来实现。
最终效果如下：用了渐变+文字阴影
text-shadow
先贴上html与css，后面我们在详讲

<div class="title">
	<h1 class="gradient">活动大标题</h1>
	<span>活动大标题</span>
</div>

.poster-top .title{position: absolute;top: 1.12rem;width: 100%;text-align: center;}
.poster-top .title .gradient-text{font-size: 1.04rem;background-image: linear-gradient(to bottom,#fffcfa,#ffefde,#ffe1c0,#ffd3a2,#ffc280);-webkit-background-clip: text;-webkit-text-fill-color: transparent;letter-spacing: 0.1rem;position: absolute;z-index: 2;left: 0.92rem;top: 0;}
.poster-top .title span{font-size: 1.04rem;text-shadow: 2px 3px 0 hsl(7,87%,57%),0px 5px 10px rgba(138,4,0,.75);color: #fb391f;letter-spacing: 0.1rem;font-weight