CSS 中是否有 text-fill 属性？

问题描述

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

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 (!),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 属性吗？

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、{{ 1}}，text-fill-position，text-fill-repeat，我猜。或者至少 text-fill-size。

解决方法

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

,

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

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,lime) text;
}
/* the shadow */
h1::before {
  text-shadow: 0 0 3px red;
}

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

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