css中给文字加阴影使其在文字颜色之下

最新推荐文章于 2025-06-30 22:07:10 发布

敲键盘的di

最新推荐文章于 2025-06-30 22:07:10 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46433620/article/details/130761880

文章介绍了如何在Vue项目中创建一个具有渐变背景和阴影的文字标题，通过设置CSS的`text-shadow`和`background-clip`属性以及利用伪元素`::before`来实现阴影位于文字下方的效果，同时保持渐变背景可见。关键在于调整元素的层级关系和透明度设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中给文字加阴影使其在文字颜色之下

vue项目中有个标题需要渐变色并加阴影，单纯使用text-shadow

text-shadow: 7px 6px 6px rgba(6,0,1,0.66);
background: linear-gradient(0deg, #EAFFFD 0%, #68FFEF 100%);
-webkit-background-clip: text;

会使阴影层覆盖在文字之上，渐变的背景被阴影覆盖。

解决问题只需要加好层级关系。

<div class="title" text="社区平台">社区平台</div>

.title{
  position: absolute;
  margin-left: 456px;
  margin-top: 19px;
  font-size: 40px;
  font-family: Source Han Sans SC;
  text-shadow: 7px 6px 6px rgba(6,0,1,0.66);
  font-weight: 600;
}
.title::before {
      content: attr(text);
      position: absolute;
      z-index: 10;
      color: #FEFEFE;
      // 渐变样式
      background: linear-gradient(0deg, #EAFFFD 0%, #68FFEF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      
      // 去除继承父级样式
      text-shadow: none;
    }