组合框阴影和文本渐变答案

【问题标题】：Combining Box Shadow and Text Gradient组合框阴影和文本渐变
【发布时间】：2020-03-06 08:47:19
【问题描述】：

是否有可能将文本渐变与框阴影结合起来？请参阅示例图像以了解我想要达到的目标。Example-Image

我已经实现了渐变，但是我之后添加的框阴影出现在前景中。我该如何解决？

h2 {
    display: inline-block;
    background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    box-shadow: inset 0px 30px white;
}

很想得到一些帮助！

谢谢！（对不起我的英语）

【问题讨论】：

标签： css linear-gradients box-shadow

【解决方案1】：

你可以尝试多个背景：

h2 {
    display: inline-block;
    font-size:50px;
    color:transparent;
    background-image:
      linear-gradient(90deg,#c93718 0%,#035b34 30%),
      linear-gradient(#ccc,#ccc);
    -webkit-background-clip: 
      text,
      padding-box;
    background-clip: 
      text,
      padding-box;
    -webkit-text-fill-color: transparent; 
}

&lt;h2&gt;A title here&lt;/h2&gt;

由于已知错误，这在 Firefox 上不起作用：https://bugzilla.mozilla.org/show_bug.cgi?id=1571244

作为 Firefox 的替代方案，考虑伪元素：

h2 {
  display: inline-block;
  font-size: 50px;
  color: transparent;
  background-image: linear-gradient(90deg, #c93718 0%, #035b34 30%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #ccc;
}

&lt;h2&gt;A title here&lt;/h2&gt;

【讨论】：

谢谢！到目前为止有效！ :) 现在我遇到了另一个问题：当我写一个变异的元音时，它没有显示出来.. 是否有可能以某种方式改变填充框的高度？感谢您的帮助！
@user13017547 调整line-height 并使其变大，直到你得到你想要的

【解决方案2】：

尝试添加一个 div，然后您可以使用 position 来解决您的问题。

h2 {
    display: inline-block;
    background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 999999;
    position: absolute;
    
}
div{
    background-color: gray;
    height: 30px;
    width: 140px;
    position: absolute;
    top: 22px;
}

<h2>This is Demo</h2>
<div></div>

【讨论】：

谢谢！我更喜欢只在 CSS 中进行更改，而不更改 html...