css中的渐变文本与文本阴影

Question

无论如何,使用此文本渐变方法,并在文本上也有一个投影. http://css-tricks.com/snippets/css/gradient-text/

当我设置我的阴影像

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

然后它会弄乱我的文本渐变,因为背景设置为透明.有没有人知道webkit浏览器的解决方案.

Answer 1

更新

为您找到了解决方案,唯一的问题是它需要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

来自评论 http://jsfiddle.net/2GgqR/5/的更新链接

在这里,我将背景的背景颜色添加到:after

h1:after {
  background: #f3f3ee;
}

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

Answer 2

您可以将filter: drop-shadowCSS属性与之结合使用。

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>