如何组合CSS text-shadow和"background-image:-webkit-gradient"

Question

我正在尝试使用CSS文本阴影以及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;
}

Answer 1

渐变"消失",因为它text-shadow位于背景之上.

1. 文字(透明)
2. 影子
3. 的背景.

我们可以通过复制文本并将其放在原始图层下面,然后在那里应用阴影来解决这个问题,例如:

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

  h1 div {
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(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>

Answer 2

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

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/

Answer 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