如何对文本同时使用文本阴影和线性渐变？答案

【问题标题】：How to use both text-shadow and linear-gradient for text?如何对文本同时使用文本阴影和线性渐变？
【发布时间】：2019-03-20 19:58:53
【问题描述】：

我尝试同时使用它们但失败了..

h1 {
  font-size: 72px;
  background: linear-gradient(to top, black 50%, orange 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

&lt;h1&gt;Heading 1&lt;/h1&gt;

只使用没有文字阴影的线性渐变：

只使用没有线性渐变的文本阴影：

同时使用：

【问题讨论】：

第二个，文本阴影只有一个，甚至得到阴影？我看到它只有1px，但我不知道。如果您按 F12 并使用“选择元素”工具选择它，它是否表明它正在获取您要应用的 CSS？
这个重复：stackoverflow.com/a/55001610/8620333?
鉴于您使用text-shadow 似乎是为了在文本周围实现笔划/轮廓，您是否考虑过只使用text-stroke？诚然，它的浏览器支持较少：caniuse.com/#search=text-stroke
@Robert 我宁愿结合使用文本阴影和线性渐变。有可能吗？

标签： html css linear-gradients

【解决方案1】：

基于此previous answer，您需要在此处复制文本：

h1 {
  font-family:sans-serif;
  font-size:60px;
  font-weight: bold;
  position:relative;
  margin:20px;
}
h1::before,
h1::after {
  content:attr(data-text);
}
h1::after {
  color:#fff; /*use white*/
  /*create the stroke around text*/
  text-shadow:
    1px 0  0px #000,
    0 1px 0px #000,
    1px 1px 0px #000,
    -1px 0 0px #000,
    0 -1px 0px #000,
    -1px -1px 0px #000,
    -1px 1px 0px #000,
    1px -1px 0px #000;
  mix-blend-mode: darken; /*everything is more dark than white so we always see the background */
}
h1::before {
  position:absolute;
  top:0;
  left:0;
  background:linear-gradient(to bottom,yellow 50%, red 51%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color:transparent;
}

&lt;h1 data-text="Heading 1"&gt;&lt;/h1&gt;

【讨论】：

一个类似的解决方案，也依赖于content，但只有一个元素：viget.com/articles/background-clip-text-shadow-gradients
@Robert 我也在使用单个元素；）我只是忘记删除我从之前的答案中获取的额外包装（已编辑）

【解决方案2】：

如果你有background: linear-gradient(to top, black 50%, orange 50%);，你应该用bottom,替换它，
在你有1px 0 black 的地方，你应该去掉black。

<style>   
h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(bottom, black 50%, orange 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: -1px 0, 0 1px, 1px 0, 0 -1px
}
</style>
<h1>Heading 1</h1>

变化：

background: -webkit-linear-gradient(bottom,black 50%, orange 50%); text-shadow: -1px 0~~black~~, 0 1px~~black~~, 1px 0~~black~~, 0 -1px~~black~~德尔>`;

【讨论】：