如何结合 CSS“文本阴影”和“背景图像：-webkit-渐变”答案

【问题标题】：How do I combine CSS "text-shadow" and "background-image: -webkit-gradient"如何结合 CSS“文本阴影”和“背景图像：-webkit-渐变”
【发布时间】：2010-09-27 08:38:39
【问题描述】：

我正在尝试使用 CSS text-shadow 以及 text-shadow 和 background-image 的组合在 Chrome/Safari 中实现渐变 + 文本阴影效果：-webkit-gradient，请参见示例 blw。我只能应用其中一种效果（如果我添加阴影渐变消失。我做错了什么？

h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}

【问题讨论】：

你为什么回滚我的编辑？
当前标题具有误导性，因为它暗示您希望文本的周围具有渐变背景。
-webkit-gradient(linear… 语法已过时，改用linear-gradient(white, black) 是安全的，请在此处查看浏览器支持：caniuse.com/css-gradients
我推荐这个问题标题：“如何给渐变文本添加阴影？”。而这个问题正文：“当我添加文本阴影时渐变消失了。” +代码。
一个代码 sn-p 会更有用，因为我们可以通过运行它立即看到结果。

标签： html text gradient css

【解决方案1】：

渐变“消失”，因为text-shadow 位于背景之上。

文本（透明）
影子
背景。

我们可以通过复制文本并将其放在原始图层下方来解决此问题，然后在此处应用阴影for example：

  h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
  }
  
  h1 div {
    background-image: linear-gradient(white, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute; 
    width: 100%;
}
  h1:after {
    text-shadow: 10px 10px 11px #fff;
    color: transparent;
  }
  
  #hello:after {
        content: 'Hello World';
  }

  <h1 id="hello"><div>Hello World</div></h1>

【讨论】：

谢谢。我将如何将 text-align 应用于此？我无法让渐变跟随？

【解决方案2】：

无需额外的 HTML 标记或伪元素，您可以使用过滤器属性和阴影功能来实现此效果。此方法也适用于背景图像与渐变。

h1 {
  font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
  background-image: linear-gradient(#787878, #484848);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(2px 2px #333);
          filter: drop-shadow(2px 2px #333);
}

小提琴：https://jsfiddle.net/eywda89g/

【讨论】：

这很好。但是：如果文本有几行，渐变会跨越所有行，而不是每行。有没有办法为每行文本制作渐变？
我相信这是公认答案的更好选择！

【解决方案3】：

这个答案类似于上面@KennyTM 的答案，除了他的答案有阴影硬编码到 CSS 中，这不适合动态文本，例如 CMS。此外，他的方法需要为每个实例提供一个单独的 ID，如果您打算大量使用此效果，这将非常繁琐。下面的示例使用了一个类，并允许使用动态文本。

试试这个：

h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
}

h1 div {
    background-image: linear-gradient(teal, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute; 
    width: 100%;
}
h1:after {
    text-shadow: 2px 2px 2px #000000;
    color: transparent;
}

.gradient-shadow:after {
    content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}

然后在你的 HTML 中：

<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1>

只需确保<div> 中的文本与title 属性中的文本匹配即可。

这是此方法的 Codepen 示例： https://codepen.io/mprewitt/pen/gexypd

【讨论】：