为我的文字添加阴影？

Question

.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;

Answer 1

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

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

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

一些额外的东西：

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

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

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

Answer 2

有可能 jquery:

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

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

为我的文字添加阴影？

Adding shadow to my text?

html

css

text

shadow