HTML – 带文本阴影的CSS中的渐变文本

概述无论如何使用此文本渐变方法,并在文本上也有一个投影. http://css-tricks.com/snippets/css/gradient-text/ 当我设置我的阴影像 text-shadow: 1px 1px 2px #000; 然后它会弄乱我的文本渐变,因为背景设置为透明. 有没有人知道webkit浏览器的解决方案. 更新 为您找到了解决方案, 唯一的问题是它需要html具有属性. htt 无论如何使用此文本渐变方法,并在文本上也有一个投影.
http://css-tricks.com/snippets/css/gradient-text/

当我设置我的阴影像

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

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

解决方法 更新

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

总结

以上是内存溢出为你收集整理的HTML – 带文本阴影的CSS中的渐变文本全部内容，希望文章能够帮你解决HTML – 带文本阴影的CSS中的渐变文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。