html - 如何使用 css 添加文本渐变？

Question

<div class="firstname">
<a href="index.html"><p class="names">DANIEL</p></a>
</div>

以上是html。

h1.method1 {
background: -webkit-linear-gradient(top, #878787, #000);
background: linear-gradient(top, #878787, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

h1.method2 {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));}

以上是我尝试使用 .names 选择器和 .firstname .names 选择器执行的操作，并且我尝试了 a.names 选择器，我不确定该方法是否不起作用或者我使用了错误的选择器。但总的来说，我只想让文本有一点渐变，看起来不错。

Answer 1

在规则末尾使用带插图的 text-shadow css 属性。这是最跨浏览器的方式。 IE9 可能不支持它，但仅此而已。

使用 rgba 颜色更好地控制和编辑浏览器中的 alpha channel (如 Firebug )