* 带阴影的渐变文本 * 过于复杂

h1 {
  -webkit-text-fill-color: transparent; /* Move to h1::before = tiny black border. Remove = black text. */
  position: relative; /* Remove = h1::before overflows to padding of h1's container if text is wrapped. */
  text-shadow: 0 0 3px red; /* Move to h1::before = red text (!), blue-lime inset shadow (!), red shadow. */
  /* filter: drop-shadow(0 0 10px red); Multiple values are applied on each other, instead of the text. */
}

h1::before {
  background: linear-gradient(blue, lime);
  -webkit-background-clip: text; /* Works, because -webkit-text-fill-color is inherited from h1. */
  content: attr(data-text); /* Remove = no h1::before = no gradient. */
  position: absolute; /* Remove = separated shadow. */
  text-shadow: none; /* Remove = red text (!), blue-lime inset shadow (!), red shadow. */
}

<!-- The data-text attribute is for h1::before {content: attr(data-text);} -->
<h1 data-text="Gradient text with shadow">Gradient text with shadow</h1>

CSS中是否有text-fill属性？

一个二个一个一个

• 如果是...
• 它是如何命名的？（text-fill是Chrome中未知的属性名称。
• 它是--或将是--哪个CSS规范（草案）的一部分？
• 如果没有...
• 如何才能提出请求？
• 它有用吗（赞成/反对）？

-webkit-text-fill-color不够

它不能用于渐变，只能用于颜色。它类似于background-color，但我正在寻找类似background的东西，这是一个速记，不仅接受颜色，而且也接受渐变。我正在寻找的text-fill可能是text-fill-attachment，text-fill-clip，text-fill-color，text-fill-image，text-fill-origin，text-fill-position，text-fill-repeat，text-fill-size，我猜。或者至少text-fill-gradient。