gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 17:21:37 25 4
gpt4 key购买 nike

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

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 .

    最佳答案

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

    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>

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

    关于css - CSS 中是否有 text-fill 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65823144/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com