带有文本阴影的css中的渐变文本

Question

反正有没有使用这种文本渐变方法，并且在文本上也有阴影。 http://css-tricks.com/snippets/css/gradient-text/

当我像

那样设置我的阴影时

text-shadow: 1px 1px 2px #000;

然后它弄乱了我的文本渐变，因为背景设置为透明。 有谁知道针对 webkit 浏览器的解决方案。

Answer 1

我想出了一个不使用filter 和z-index 的解决方案。如果您有背景或前景，则可以使用它：

h1 {
    position: relative;
}

h1::after {
    background-image: linear-gradient(#f00, #fcc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
}

h1::before {
    text-shadow: #000 1px 1px 2px;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
}

效果：https://jsfiddle.net/m9dtf6po/2/

当然，由于我使用的是::before和::after，所以需要一个属性，但是可以共享该属性。使用z-index的问题在于：

• 如果图层后面有任何元素，阴影会消失（见https://jsfiddle.net/m9dtf6po/3/）；或
• 如果图层前面有任何元素，则文本将显示在这些元素的前面（请参阅https://jsfiddle.net/m9dtf6po/4/）。

当我确实有一个背景和一个前景夹在我的文本中时，这就是我遇到的问题，如下图所示：

文本S+ 需要位于条形顶部，但在所有事物的顶部都可以有一个框。我实际上找到了这篇文章并尝试了 Karl 的解决方案，但阴影消失在酒吧后面。

Answer 2

您可以结合filter: drop-shadow CSS 属性来达到目的。

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px #333);
}

<h1>Example</h1>

Answer 3

更新

为您找到了解决方案， 唯一的问题是它要求 html 有一个属性。

http://jsfiddle.net/2GgqR/2/

h1 {
  font-size: 72px;
  background-image: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;  
}

h1:after {
  background: none;
  content: attr(data-text);
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
  text-shadow: 1px 1px 2px #000;
}

原文在这里 :) http://viget.com/inspire/background-clip-text-shadow-gradients

更新链接 来自 cmets http://jsfiddle.net/2GgqR/5/

这里我把背景的背景颜色加到了:after

h1:after {
  background: #f3f3ee;
}

.background{
    background-color: #f3f3ee;
    position: relative;
    z-index: 1;
}

Answer 4

我可能真的对此表示反对，但我相信这样做的唯一方法是在后面放置一个重复的元素。这只是一个想法。