css - CSS 中是否有 text-fill 属性？

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-fill CSS中的属性？

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

<h1>Gradient text with shadow</h1>

如果是...

怎么称呼？ ( 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 .

Answer 1

不是对您问题的直接回答，而是对代码的不同想法，以表明使用渐变文本获得阴影并不复杂或过于复杂

h1 {
  display: grid;
}

h1::before,
h1::after {
  content: attr(data-text);
  grid-area: 1 /1;
  color:transparent;
}

/* the gradient */
h1::after {
  background: linear-gradient(blue, lime);
  -webkit-background-clip: text;
}
/* the shadow */
h1::before {
  text-shadow: 0 0 3px red;
}

<h1 data-text="Gradient text with shadow"></h1>

在不久的将来，您可以进行如下优化(目前仅适用于 Firefox)

h1 {
  display: grid;
}

h1::before,
h1::after {
  content: attr(data-text);
  grid-area: 1 /1;
  color:transparent;
}

/* the gradient */
h1::after {
  background: linear-gradient(blue, lime) text;
}
/* the shadow */
h1::before {
  text-shadow: 0 0 3px red;
}

<h1 data-text="Gradient text with shadow"></h1>

您可以用一行来创建带有渐变色的文本。