给我的文字添加阴影？答案

【问题标题】：Adding shadow to my text?给我的文字添加阴影？
【发布时间】：2015-02-28 16:01:23
【问题描述】：

谁能帮我添加阴影：http://jsfiddle.net/qzeohf20/3/

.rainbow {
    font-size: 35px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 10px;
    font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', 'sans serif';
    background-image: -webkit-gradient( linear, left bottom, right top, color-stop(0, #C6781D),  color-stop(1, #D1B72D) );
    background-image: gradient( linear, left bottom, right top, color-stop(0, #C6781D), color-stop(1, #D1B72D) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-style:
}

这有可能吗？

我已经尝试过了：text-shadow: 1px 1px #000000;

【问题讨论】：

标签： html css text shadow

【解决方案1】：

这是可能的，但我想结果不是你所期望的。使用-webkit-background-clip: text;，您实际上将一块背景切割成文本的形状，而使用color:transparent，您可以使文本本身不可见。

所以你在这里看到的实际上是背景。这意味着，如果您添加阴影，该阴影将呈现在您的文本上方。

您可以通过堆叠 2 个 div 来解决这个问题：底部 div 将负责创建阴影，而顶部 div 将添加渐变。
updated fiddle

一些额外的东西：

-webkit-background-clip: text;
background-clip: text;

background-clip 属性没有值text。这只是 WebKit 浏览器中的专有解决方案，因此您想要的只能在这些浏览器中使用。

你的最后一行是font-style: 显然你忘了在那里添加一些东西。给该属性一个值或删除该行。

【讨论】：

【解决方案2】：

使用 jquery 是可能的：

$(document).ready(function(){
  main_width = $(".text").width();
  main_text = $(".text").html();
  $(".text2").width(main_width);
  $(".text2").html(main_text);
});

现在您可以在文本 div 后面使用普通样式在 css 中定义您的第二个 div。

【讨论】：