Question

任何人都可以帮我添加阴影：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;

Answer 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:显然你忘了在那里添加一些东西。给该属性赋值或删除该行。

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后面有一个普通的样式。

在我的文字中添加阴影？

2 个答案: