我如何組合CSS文字陰影和「background-image：-webkit-gradient」

Question

我想在Chrome/Safari中使用CSS文字陰影和文字陰影以及文字陰影和background-image：-webkit-gradient，參見示例blw。我只能做的效果之一適用（如果我添加漸變消失的影子。我在做什麼錯？

h1 { 
font-size: 100px; 
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
text-shadow: 0 1px 1px #fff; 
} 

Answer 1

梯度「消失」，因爲text-shadow是在背景之上的水平。

1. 文本（其是透明的）
2. 陰影
3. 背景。

我們可以解決這個複製的文本，並把它原來的層下面，然後應用陰影出現，for example：

h1 { 
    position: relative; 
    font-size: 100px; 
    text-align: center; 
    } 

    h1 div { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    position: absolute; 
    width: 100%; 
} 
    h1:after { 
    text-shadow: 10px 10px 11px #fff; 
    color: transparent; 
    } 

    #hello:after { 
     content: 'Hello World'; 
    } 

<h1 id="hello"><div>Hello World</div></h1> 

Answer 2

這個答案是@KennyTM類似的回答以上，除他的回答有一個硬編碼到CSS中的陰影，它不適用於CMS等動態文本。另外，他的方法需要爲每個實例分配一個ID，如果您打算使用這種效果，這將非常繁瑣。下面的例子使用一個類來代替，並允許動態文本。

試試這個：

h1 { 
    position: relative; 
    font-size: 100px; 
    text-align: center; 
} 

h1 div { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    position: absolute; 
    width: 100%; 
} 
h1:after { 
    text-shadow: 2px 2px 2px #000000; 
    color: transparent; 
} 

.gradient-shadow:after { 
    content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */ 
} 

然後在你的HTML：

<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1> 

只要確保在<div>文中title屬性的文本相匹配。

隨着一些額外的格式（我用Helvetica Neue字體超輕和暗背景），就可以得到一個效果是這樣的：http://cl.ly/image/2C0k0I3W271D

Answer 3

，沒有額外的HTML標記或僞元素，你可以使用過濾器實現這種效果屬性和投影功能。此方法也適用於背景圖像vs漸變。

h1 { 
    font:54px 'Open Sans', 'Helvetica', Arial, sans-serif; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#484848)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    -webkit-filter: drop-shadow(2px 2px #333); 
      filter: drop-shadow(2px 2px #333); 
} 

小提琴：https://jsfiddle.net/eywda89g/