CSS中有文本填充属性吗？

Question

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

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>

text-fillCSS中有属性吗？

h1 {
  text-fill: linear-gradient(blue, lime);
  text-shadow: 0 0 3px red;
}

<h1>Gradient text with shadow</h1>

• 如果是...
  • 怎么称呼？（text-fillChrome 中的未知属性名称。）
  • 它是或将是哪个 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。

Answer 1

CSS中有一个text-fill-color属性，它与-WebKit-扩展一起使用。